LIGHTBOX 2.03a:Galeria de imagensLightBox 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:
|
|
Atualizando....
![[Valid RSS]](http://img182.imageshack.us/img182/6753/validrsscv2.png "Validate my RSS feed")
Postar um comentário
Por favor deixe seu email pra futuro contato. Comentários sem email válido não serão respondidos!