Post tageado como lightbox

Aplicando o Lightbox 2 em sua página

Postado por Weverton Naves em HTML/CSS/Javascript. 13/Março/2008.

Galera, já surgiu aquela necessidade de fazer uma visualização de fotos mais eficiente e rápida de fazer.
Então, eis a solução, o LightBox 2 (by Lokesh Dhakar). Existem muitos lightboxes por aí, mas esse eu acho o mais simples de usar, e mais direto.
O lightbox utiliza o framework prototype e a biblioteca de efeitos Scriptaculous.

Vamos aprender aqui á usá-lo. Baixe aqui o exemplo.

lightbox.jpg

##INTALAÇÃO

1º Coloque os 3 arquivos .js no seu site, e inclua-os no header:
<script type=”text/javascript” src=”js/prototype.js” mce_src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects,builder” mce_src=”js/scriptaculous.js?load=effects,builder”></script>
<script type=”text/javascript” src=”js/lightbox.js” mce_src=”js/lightbox.js”></script>
2º Coloque o arquivo .css no seu site, e inclua-o no header:
<link rel=”stylesheet” href=”css/lightbox.css” mce_href=”css/lightbox.css” type=”text/css” media=”screen” />

3º Coloque as imagens da pasta images no seu site, e cheque se no arquivo .css, as imagens prevlabel.gif e nextlabel.gif estão referenciadas corretamente, e também as imagens loading.gif e closelabel.gif no arquivo lightbox.js.

http://www.huddletogether.com/projects/lightbox2/

 ##ATIVAÇÃO

1º Nos links que você quer abrir o lightbox, só adicionar o atributo rel=”lightbox” na tag <a>:

<a href=”images/minhaImagem.jpg” mce_href=”images/minhaImagem.jpg” rel=”lightbox” title=”Meu Título”>Abrir imagem</a>

O atributo title informa qual será o título do box.

2º Para um grupo de imagens, onde os botões de próximo e anterior serão ativados, coloque o nome do imageset entre chaves, assim:

<a href=”imagens/imagem1.jpg” mce_href=”imagens/imagem1.jpg” rel=”lightbox[setImage]“>Abrir imagem 1</a>
<a href=”imagens/imagem2.jpg” mce_href=”imagens/imagem2.jpg” rel=”lightbox[setImage]“>Abrir imagem 2</a>
<a href=”imagens/imagem3.jpg” mce_href=”imagens/imagem3.jpg” rel=”lightbox[setImage]“>Abrir imagem 3</a>

Isso aí galera. Prático, fácil e rápido de instalar. Vale a pena usar!
Lembrando que não dá pra abrir .swf via lightbox. A não ser que seja feita uma alteração no código .js. 

, , , ,

38 Comentários