Lightbox: Um javascript simples, que está sendo bastante utilizados no sites de galerias para a visualização de imagens mantendo o usuário na página atual.

O Lightbox utiliza a criação de uma DIV usando superposição de imagens ou seja, carrega a imagem acima de sua página atual, e não dentro. E funciona em todos os navegadores, até mesmo defasado o Internet Explorer 6.

Lista de arquivos para download

• lightbox.css – arquivo de estilo
• lightbox.js – arquivo javascript
• overlay.png – Imagem de fundo usando 80% de opacidade preto para criar sombra
• loading.gif – barra de status carregando
• close.gif - imagem do botão fechar

Como usar:

• Inclua o  lightbox.js no header da página.

<script type="text/javascript" src="lightbox.js"></script>

• Adiciona à tag <a> o atributo rel="lightbox" em qualquer link que deseja usar o lightbox. Por exemplo

<a href="imagens/imagem-1.jpg" rel="lightbox" title="Legenda da foto">imagem #1</a>

• Opcional: Use o atributo title se você quiser mostrar um título.

Personalisando:

1. Você pode usar o estilo CSS para o conteúdo da imagem. Código abaixo:

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left;}
#keyboardMsg{ float: right; }
#lightbox img{ border: none; }
#overlay img{ border: none; }

Para criar a sombra do efeito da página, você precisará usar um arquivo PNG e alguns códigos CSS extras.

#overlay{ background-image: url(overlay.png); }

* html #overlay{ background-color: #000;
background-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”overlay.png”, sizingMethod=”scale”);
}

1. Se você quiser mostrar ao usuário uma barra de status animada  ”carregando”,  especifique o local do aruqivo loading.gif no arquivo lightbox.js.

var loadingImage = 'loading.gif';

1. Se você quiser usar o botão fechar como uma imagem  ’X', especifique o local da imagem close.gif, no arquivo  lightbox.js.

var closeButton = 'close.gif';

O site oficial do recurso é o http://www.huddletogether.com/projects/lightbox/