lightbox

Este tutorial tem base no próprio site do criador do Lightbox JS é praticamente uma tradução do seu conteúdo para ajudar quem não se dá muito bem com inglês.

Benefícios:

Sobrepõe imagens à página corrente e não dentro da página. Isto faz com que as imagens não sejam limitadas por um layout. Exemplo é uma imagem que sai fora do layout por ter uma largura maior.

Mantém os utilizadores na mesma página em vez de os levar para outra para terem de ver a imagem em ponto maior. Clicam para visualizar a imagem e clicam de novo para a fechar em vez de terem de voltar á página ou carregar no botão return.
Como utilizar:

1. Baixe o pacote e inclua os scripts no head da página.

<!-- Código que cria o efeito Lightbox -->
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects,builder">
</script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<!-- Fim do código Lightbox -->

2. Adicionar o atributo rel=”lightbox” a qualquer link para activar a lightbox nesse link. Por exemplo:

<a href="imagem.jpg" rel="lightbox" title="minha legenda">image #1</a>

3.Para criar albuns basta colocar o rel como um "array":

<a href="images/image-1.jpg" rel="lightbox[1]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[2]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[3]">image #3</a>

Agora vem a parte divertida
Como personalizar

Utilizando-se o CSS é possivel personalizar o layout do Lightbox.