Vou ensinar a por lightbox no seu site

[filipepepe 0]

Os passos para colocar isto em funcionamento são os seguintes:

 

1º Download do script aqui

 

2º Descompactar e colocar na raiz do vosso site

 

3º Editar a página que contem as imagens e colocar a seguir a <header> o seguinte código:

 

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

4º 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

 

5º Um pequeno truque Este truque serve para que as imagens sejam tratadas como um grupo de imagens, sendo adicionado um menu de navegação. Experimentem.

<a href="images/imagem1.jpg" rel="lightbox[roadtrip]">imagem 1</a>
<a href="images/imagem2.jpg" rel="lightbox[roadtrip]">imagem 2</a>
<a href="images/imagem3.jpg" rel="lightbox[roadtrip]">imagem 3</a>

 

pronto

[JCMais 75]

Só para avisar, quem usa o JQuery, usando o LightBox pode (deve) ocorrer erros de incompatibilidade, e portanto deve começar a usar o JQuery no modo noConflict.