Excelente Lightbox para Imagens, Vídeos, Flash, Ajax e muitos outros
prettyPhoto não só suporta imagens, ele também suporte para vídeos, flash, YouTube, iframes e ajax. É muito fácil de configurar e flexível caso você quiser personalizá-lo. Além disso, é compatível em todos os principais navegadores, mesmo IE6. Ele também vem com APIs úteis de modo prettyPhoto que podem ser integrados praticamente em qualquer lugar!”
- Clique aqui para baixar o Script Lightbox prettyPhoto
- Link alternativo
Instalação
Primeiro incluir a biblioteca jQuery, prettyPhoto javascript e o prettyPhoto CSS no cabeçalho da página (s) em que você deseja usar.
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Em seguida, você precisa inicializar op prettyPhoto. Coloque o seguinte código antes da tag de fechamento body
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); }); </script>
Alguns exemplos de aplicação
Imagens
- Crie um link <a href=”#”>
- Adicione o atributo (rel=”prettyPhoto”) no link.
- Atualize o seu <a href=”#”> insira o link para o qual deseja abrir o Lightbox
Exemplo
<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="Descrição"> <img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Titulo" /> </a>
Vídeos do Youtube ( e outros)
- Crie um link <a href=”#”>
- Adicione o atributo (rel=”prettyPhoto”) no link.
- Atualize o seu <a href=”#”> insira o link do vídeo que você utiliza para compartilhar o vídeos para os seus amigos.
Exemplo
<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""> <img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /> </a>