Já tinha feito várias POG’s para criar um Lightbox e acabei fazendo uma coisa mais descente e que possa ser facilmente usado.

Vamos a implementação:

Baixe o pacote Lightbox.rar, e inclua os arquivos em sua página.

Nas TAG’s A coloque as seguintes informações nos atributos a seguir:

title = Conteúdo da legenda da foto
rel = CaixaDeLuz
rev = Url da imagem grande

No onload ou após o carregamento do seu código coloque as linhas de JS:

<script type="text/javascript">
    CaixaDeLuz.definirClasses(’NOME_DE_UMA_CLASS‘);
    CaixaDeLuz.definirBotaoFechar(’URL_IMAGEM_FECHAR‘);
    CaixaDeLuz.carrega();
</script>

Os métodos ‘definirClasses‘ e ‘definirBotaoFechar‘ não são obrigatórios, se não forem invocados executarão suas situações padrões.

O que cada um faz…

definirClasses = Define uma classe CSS para os elementos onde pode-se, via CSS ajustar cores, bg’s e etc.
definirBotaoFechar = Define a imagem do ‘close’ da foto, se não for invocado o evento ‘close’ acontecerá quando a foto for clicada.

Bom… É isso!

Obs.: Você poderá usar N vezes em sua página.

Abs,
Chapoo