Home Programas Revistas Ebooks Videos Online Ufologia
2008-07-07

LIGHTBOX 2.03a:Galeria de imagens  

LightBox 2 é um script que permite sobrepor uma imagem no site ao clicar em uma imagem ou em um link. Visualize imagens sobre sua página atual, em um box customizável, e não em páginas externas (como janelas por exemplo).

Quer fazer uma igual? Veja tutorial abaixo.

OBS:Todos os Lightbox tem um problema bastante chato: só funcionam quando todo o código da página carrega.
Ou seja, se sua página ou a minha estiver muito lenta, o Lightbox apenas vai funcionar quando ela carregar por completa.
click em uma das imagens.





Tutorial:

1º passo:Copie e cole esse código abaixo logo após a tag <HEAD> do seu blog. Salve.

<script type="text/javascript" src="http://rosduz.googlepages.com/prototype.js"></script>
<script type="text/javascript" src="http://rosduz.googlepages.com/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://rosduz.googlepages.com/lightbox.js"></script>
<link rel="stylesheet" href="http://rosduz.googlepages.com/lightboxx.css" type="text/css" media="screen" />

2º passo:Para ativar a função LightBox toda vez que for postar alguma imagem, faça assim:

Apenas uma imagem:
<a href="URL DA IMAGEM" rel="lightbox"><img src="URL DA IMAGEM" width="100" height="40" alt="" /></a>

As tags width="100" e height="100" vão determinar o tamanho que as imagens em thumbnail vão aparecer na postagem. Mude como quiser os tamanhos.
É essencial colocar o rel="lightbox para que o Javascript possa identificar que esse link pertence ao lightbox.

Grupo de imagens:
<a href="URL DA IMAGEM" rel="lightbox[exemplo]"><img style="width: 100px; height: 76px;" src="URL DA IMAGEM" border="0" width="100" height="100" /></a>
<a href="URL DA IMAGEM" rel="lightbox[exemplo]"><img src="URL DA IMAGEM" border="0" width="100" height="100" /></a>
<a href="URL DA IMAGEM" rel="lightbox[exemplo]"><img src="URL DA IMAGEM" border="0" width="100" height="100" /></a>

Assim é possível fazer com que as imagens no lightbox apareçam num mesmo box,uma a uma, clicando em "Next" e "Prev". A palavra "exemplo" é o grupo que essa imagen pertence. Para cada gupo de imagens uma identificação diferente.

Opções:Se quiser colocar um comentário na sua imagem você coloca a opção title="Seu comentário".
Veja:
<a href="URL DA IMAGEM" rel="lightbox" title="Seu Comentário">URL DA IMAGEM</a>

Pronto.
Percebeu que todos os códigos e arquivos do Lightbox são externos, deixando assim seu template mais limpo e não cheio de códigos que fica até identificar depois.
O caminho que usei foi:http://rosduz.googlepages.com/........
Se um dia quiser mudar é só trocar pelo seu.
Códigos do Lightbox.




Bookmark este post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google

VEJA TAMBEM



Postar um comentário

Por favor deixe seu email pra futuro contato. Comentários sem email válido não serão respondidos!