Olá pessoal. Vamos dar continuidade ao artigo Galeria de imagens dinâmica com PHP, Spry e o Lightbox 2 e finalizá-lo.

Como falei na matéria anterior, iremos estilizar a galeria de imagens e incluir o Lightbox 2. Portanto, vamos iniciar fazendo o download do Lightbox2.

O arquivo ZIP que você baixou contém três pastas e um arquivo denominado como index.html. Esse arquivo contém instruções de como adicionar o Lightbox 2; já as pastas contém os arquivos necessários para que tal recurso funcione. Isto é, a pasta js contém o framework Prototype, a biblioteca de efeitos Scriptaculos, e o arquivo lightbox. Esse último arquivo requer essas duas bibliotecas. A pasta css, contém um arquivo css chamado lightbox que é responsável por estilizar o efeito proporcionado pelo recurso. A pasta images contém as imagens por ele utilizadas.

Você pode se perguntar o porquê de utilizar o Lightbox 2, e eu lhe respondo. Ele é um recurso simples, fácil de ser instalado, utiliza-se de JavaScript não-obstrutivo, é acessível, funciona nos browsers mais modernos e exibe a imagem em questão sobre a página em que ela se encontra. (você verá o efeito). Portanto, vamos instalá-lo.

A primeira coisa a ser feita é incluir os arquivos JavaScript e o arquivo CSS no header da página. O resultado é o seguinte:

Exemplo de inclusão dos arquivos JavaSript e CSS referente ao Lightbox 2.0

Aqui está o código utilizado:

<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" />

Nota: a ordem em que os arquivos são inseridos são de extrema importância para um perfeito funcionamento. Portanto, mantenha a seqüência apresentada.

Uma vez que os arquivos foram inclusos, a segunda etapa é ativar o Lightbox. Para isso, iremos alterar o código HTML responsável em exibir as imagens. Observe:

Código HTML responsável em exibir as imagens alterado

O que fizemos foi incluir um link para cada imagem. Desta forma, ao clicar sobre a imagem o usuário será redirecionamento para visualizá-la. Como utilizaremos o Lightbox permitindo a ele (usuário) visualizá-la na própria página, adicionamos o atributo rel no link (tag a) a fim de ativar o Lightbox.

O atributo rel é o responsável em ativar o Lightbox. Repare que utilizamos rel=”lightbox[imasters]” desta forma criamos um grupo, imasters, para as imagens. Com isso, o Lightbox saberá que todas as imagens estão relacionadas em um mesmo grupo e irá tratá-las de tal forma.

Se você testar nossa galeria neste momento, verá que o Lightbox não funciona. Teoricamente era pra funcionar. Percebi que o Spry XML Data Set junto com o Lightbox não se entendem muito bem. E isso me trouxe dor de cabeça e quase duas semanas de pesquisas e testes exaustivos para ambos funcionarem juntos.

Em pesquisas pelo Google, descobri outros desenvolvedores com o mesma problema, mas sem solução. Como eu tinha prometido que nossa galeria utilizaria o Lightbox 2, me senti na obrigação de criar uma solução para o problema encontrado. E criei. Vou explicar a lógica para vocês.

Primeiramente, precisamos adicionar uma função no head da página que chame o Lightbox após um determinado período. Veja:

<script type="text/javascript">
function activeLightboxWithSpryXMLDataSet() {
	setTimeout(function() { initLightbox(); }, 1000);
}
</script>

A lógica dessa função é a seguinte: como o Lightbox utiliza um JavaScript não-obstrutivo, ele precisa analisar todos os links que contenham o atributo rel – falamos sobre ele acima – da página, e em seguida adicionar um evento do tipo onclick sobre cada um deles. Mas, como os links são gerados dinamicamente pelo Spry XML Data Set, o Lightbox precisa analisar os links após o Spry XML Data Set criá-los. Sendo assim, o Lightbox será chamado após um determinado período; para este período usei 1000 milissegundos – que corresponde a 1 segundo. O valor utilizado é relativo a quantidade de imagens utilizadas, faça testes e estipule um valor adequado a sua galeria.

Agora, após os códigos HTML do Spry Repeat List, vamos chamar a função que criamos. Observe:

Exemplo de como chamar a função activeLightboxWithSpryXMLDataSet();

Para finalizar, abra o arquivo lightbox.js – que se localiza dentro da pasta js – e remova, ou comente – a última linha, 817, do arquivo. Observe a linha:

Event.observe(window, 'load', initLightbox, false);

Ufa, pronto. Se desejar, baixe o arquivo finalizado. Nele adicionei algumas declarações CSS para estilizar a galera. Veja alguns exemplos:

Exemplo da galeria

Exemplo da galeria.

Exemplo da galeria

A conclusão que tenho, é que utilizar o Lightbox junto ao Spry XML Data Set não é legal, simpático e produtivo. Porém, como disse anteriormente neste artigo, me senti na obrigação de criar uma solução para o problema encontrado, ou seja, utilizar o Lightbox 2 junto com o Spry XML Data Set.

Espero que tenham gostado. Um abraço a todos.