Lytebox permite que você crie efeitos para visualização e slideshow para galerias de imagens de forma simples e bonita. Quando um imagem é clicada, a página onde ela está fica escurecida e uma ampliação da imagem aparece no centro da tela, com navegação para uma galeria de imagens e uma apresentação em slideshow com um timer predefinido.


Para colocar no seu site você precisa deste arquivo, onde estão os .js, o estilo CSS da galeria e as imagens de navegação.

A chamada para o script deve ser declarada dentro da tag <HEAD> com esses parâmetros:

<script type=”text/javascript” language=”javascript” src=”lytebox.js”></script>
<link rel=”stylesheet” href=”lytebox.css” type=”text/css” media=”screen” />

Lembre-se de que se você descompactou o arquivo em uma pasta difente, você deve indicá-lo no código acima.

Agora vem as chamadas para a imagem. Essas chamadas são colocadas no parâmetro rel do link que tem a imagem como caminho. Veja exemplo neste link.

<a title=”Primeiro link do exemplo” rel=”lytebox” href=”angelinajolie01.jpg”>link</a>

Repare no parâmetro title e rel. O primeiro será a legenda que vai aparece em baixo da imagem, o segundo é a chamada para o Lytebox.

Para criar uma galeria, no parâmetro rel coloque lytebox[nome da galeria] indicando um nome para a galeria de imagens. Se você colocar vários links com esse mesmo parâmetro, na visualização irá aparecer a opção de navegar entre as fotos. Clique em uma das imagens acima para ver o exemplo.

O último uso é o Slideshow. Para criar uma transição de imagens, use no parâmetro rel a chamada lyteshow[nome da galeria]. O funcionamento é igual ao da galeria, porém agora as imagens mudam automaticamente.

É isso aí, galera. Este foi o primeiro post desta categoria. Meu objetivo aqui será compartilhar com vocês técnicas, ferramentas, dicas e scripts para facilitar a vida do programador e do webdesigner. Em breve teremos mais.