Excelente Lightbox para Imagens, Flash, Ajax e Vídeos do Youtube

Loading

Excelente Lightbox para Imagens, Flash, Ajax e Videos do Youtube

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!”

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>

 

VEJA TAMBÉM:   @font-face - Quando a fonte do site não está presente no computador do usuário

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>

Deixe um comentário

Índice
Rolar para cima