O hack Lightbox 2, é uma maneira interessante de visualizar imagens, sem sair do seu blog ou carregar uma nova página e além disso de forma visualmente agradável, com efeitos em javascript, que lembram muito as animações em flash. Para visualizar o efeito clique na imagem abaixo.
Para implementar o Lightbox 2, vamos por a mão na massa, ou no código.
1 - Vá em "Modelo", "Editar HTML" e marque a caixa "Expandir modelo de widgets". Agora vamos localizar o seguinte bloco:
]]></b:skin>
2 - Logo abaixo copie e cole o seguinte código:
<script src='http://blog.hackblogger.googlepages.com/prototype.js' type='text/javascript'></script>
<script src='http://blog.hackblogger.googlepages.com/effects.js' type='text/javascript'></script>
<script src='http://blog.hackblogger.googlepages.com/scriptaculous.js' type='text/javascript'></script>
<script src='http://blog.hackblogger.googlepages.com/lightbox.js' type='text/javascript'></script>
<link rel="stylesheet" href="http://blog.hackblogger.googlepages.com/lightbox.css" type="text/css" media="screen" />
<script src='http://blog.hackblogger.googlepages.com/effects.js' type='text/javascript'></script>
<script src='http://blog.hackblogger.googlepages.com/scriptaculous.js' type='text/javascript'></script>
<script src='http://blog.hackblogger.googlepages.com/lightbox.js' type='text/javascript'></script>
<link rel="stylesheet" href="http://blog.hackblogger.googlepages.com/lightbox.css" type="text/css" media="screen" />
3 - Agora toda vez que você quiser que uma imagem seja aberta pelo lightbox, basta colocar o seguinte código:
<a title="Aqui vai a descrição que aparace no Lightbox" href="endereço da imagem que vai ser carregada" rel="lightbox"><img src="endereço do thumb"/></a>
Colocando a descrição e os endereços da thumb e da imagem.
4 - Você também pode abrir varias imagens, como se fosse um slideshow, basta colocar o seguinte código:
<a title="Aqui vai a descrição que aparace no Lightbox-1" href="endereço da imagem que vai ser carregada-1" rel="lightbox[roadtrip]"><img src="endereço do thumb-1"/></a>
<a title="Aqui vai a descrição que aparace no Lightbox-2" href="endereço da imagem que vai ser carregada-2" rel="lightbox[roadtrip]"><img src="endereço do thumb-2"/></a>
<a title="Aqui vai a descrição que aparace no Lightbox-3" href="endereço da imagem que vai ser carregada-3" rel="lightbox[roadtrip]"><img src="endereço do thumb-3"/></a>
<a title="Aqui vai a descrição que aparace no Lightbox-2" href="endereço da imagem que vai ser carregada-2" rel="lightbox[roadtrip]"><img src="endereço do thumb-2"/></a>
<a title="Aqui vai a descrição que aparace no Lightbox-3" href="endereço da imagem que vai ser carregada-3" rel="lightbox[roadtrip]"><img src="endereço do thumb-3"/></a>
Veja abaixo o efeito:
O original deste hack pode ser encontrado, clicando aqui.
5 comentaram:
Não consegui...
Segui a risca, e acredito que no seu tutorial exista um erro:
Quando vc diz "]]menormaior/b:skin]menor", não seria "]]menormaior/b:skinmenor"...
Vlw pelas dicas!
Boa sorte no teu blog
Amplexos Libertários
Opa,obrigado pelo aviso, código concertado o correto é:
]]></b:skin>
Pelo amor de Deus, o que é thumb??
Pode me responder por e-mail?
Por favor!!!
Amigo parece que o script parou de funcionar hoje, poderia arrumar?
Depois de martelar a cabeça nesse sistema aí, percebi que dessa forma não dá. ;x
Mais Calma...vou explicar a vcs.
Antes de começar, se preferir, baixe os arquivos do ligthbox e hospede onde achar necessário (se fizer isso terá que configurar o "ligthbox.js" e o "ligthbox.css" e substituir os links do script).Ahh...e o DROPBOX funciona SIM.
Pra colocar apenas pra funcionar...baixe esse tutorial que eu fiz aqui.
Baixar
Obs.: No meu blog, tem um slide de outro modelo, quando coloco esse aqui, o outro não funciona."
Fica aí a dica. :D
Abraços!
Dúvidas?
maycon_r.ferreira@hotmail.com
Postar um comentário