Tutorial Lightbox
Lightbox Image Viewer 2,0 desenvolve Lightbox Image Viewer:
Serve para abrir as imagens com um efeito especial onde a imagem a ser aberta se sobressai acima do blog.
Veja exemplo:
1º – Baixar os arquivos a serem hospedados e colocados abaixo nos seus respectivos endereços:
Baixe os arquivos aqui:
Lightbox 2.03
Coloque estes arquivos entre o seu <head> </head>do seu html.
Não esqueça de fazer download e susbtituir os links abaixo pela sua própria hospedagem, deixei assim para que vocês possam testar com todos os arquivos já hospedados.
|
1 2 3 4 5 |
<script src='http://h1.ripway.com/bylecca/downloads/prototype.js' type='text/javascript'></script> <script src='http://h1.ripway.com/bylecca/downloads/scriptaculous.js?load=effects' type='text/javascript'></script> <script src='http://h1.ripway.com/bylecca/downloads/lightbox.js' type='text/javascript'> </script> <script src='http://h1.ripway.com/bylecca/downloads/effects.js' type='text/javascript'> </script> <link href='http://h1.ripway.com/bylecca/downloads/lightbox.css' media='screen' rel='stylesheet' type='text/css'/> |
Onde estão as imagens a serem substituidas:
No lightbox.js
No lightbox.css
Procure pelas imagens que hospedei e substitua pela sua hospedagem.
Precisara ter no começo das sua página caso não tenha para funcionar corretamente:
|
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
Dica: para pesquisar e localizar nomes use CRTL+F que localiza mais rápido.
Precisara também hospedar todas as imagens em seu hosting, tambéms os arquivos, substitua pelos meus arquivos que estar lá, deixei para vcs localizarem no lightbox.js porque dar um pouquinho de trabalho para localizar.
Crie sua miniatura e substitua e use os códigos abaixo :
|
1 |
<a href="endereço da imagem" rel="lightbox" title="coloque aqui o titulo da imagem"> <img src=" http://endereço da imagem aqui novamente"> </ a> |
O atributo rel é obrigatório, a fim de ativar o efeito especial para as imagens
O ” title ” Permite que ao abrir a imagem apareça então uma descrição da mesma.
define e acrescenta uma legenda abaixo da imagem ampliada.
|
1 |
<a href="endereço da imagem" rel="lightbox" title="coloque aqui o titulo da imagem"> <img src=" http://endereço da imagem aqui novamente"> </ a> |
Lightbox versão 2 também acrescenta a capacidade de agrupar vários links imagem em conjunto.
Use esntão esse códigos para ter sequências na visulização de suas imagens.
Como você pode ver, a imagem tem ligações a um grupo juntos, você muda o “rel” pelo r “luz [Roadtrip]”, onde “Roadtrip” vai ser o responsavel pelas imagens em sequencia conforme clicada .
|
1 2 3 4 5 6 7 8 9 10 |
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a> <a href="images/image-1.jpg" rel="lightbox[roadtrip]"> imagem # 1 </ a> <a href = "images/image-2.jpg" rel = "luz [Roadtrip]" > image # 2 </ a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]"> imagem # 3 </ a> |
Página que aceitam formatos js :
É isso aí!Aproveite este fantástico script. Lembre-se, há também lightbox V1 se você não precisa do recurso de agrupamento é só um efeito elegante para suas imagens.
Visite página original dynamicdrive.com
Muito bom, gostei.