Lightbox2 – Visualização de imagens com estilo no teu site

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.

light_00

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

light_01

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>

light_02

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

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google photo

Está a comentar usando a sua conta Google Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s