Lightbox2 – Visualização de imagens com estilo no teu site
Criado por Pedro Pinto em 27 de Abril de 2011 | 27 comentários
Agora com suporte para o IE9!
Em 2008 (uffff ja passaram 3 anos), apresentamos aqui o Lightbox que permite dar um toque profissional e moderno ao nosso site, disponibilizando um efeito especial para apresentação de imagens. Esse efeito é bastante usado aqui no pplware e podem confirmar carregando na imagem de introdução deste artigo. Recentemente foi disponibilizado o Lightbox v2.05.
Vamos aprender como colocar em funcionamento o Lightbox no vosso site.
Como usar o Lightbox2 no nosso site?
Para colocarem o lightbox2 a funcionar no vosso site, devem seguir os seguintes passos:
Passo 1 – Download do script aqui (lightbox2.05.zip)
Passo 2 – Descompactar e colocar na raiz do vosso site
Passo 3 – Editar a página que permitirá visualizar as imagens e colocar a seguir a <header> o seguinte código:
http://js/prototype.js http://js/scriptaculous.js?load=effects,builder http://js/lightbox.js
Passo 4 – (Imagem única) Criem um “thumbnail” da imagem original e coloquem um link na imagem do tipo:
<a href=”images/imagem1.jpg” rel=”lightbox” title=”Minha foto”>Carregue Aqui</a>
onde:
- imagem1.jpg é o nome da imagem (em tamanho original). A imagem está dentro da pasta imagens.
- title – Um título para a imagem
Passo 5 – (Grupo de imagens) Quem pretender disponibilizar um grupo de imagens, e incluir um menu de navegação devem usar o código seguinte em substituição do anterior:
<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>
E está feito. Agora basta abrir a página que acabaram de desenvolver para observar se as imagens são apresentadas com estilo. Alguma duvida ou questão que tenham, podem colocar em comentário para vos podermos ajudar.
Alguém conhece outros scripts do género?
Artigos relacionados
Homepage: LightBox2
Hom Digitalis 