Diga “oi” ao jQuery lightBox Plugin

Olá a todos. Gostaria, primeiramente, de informar sobre uma promoção que criei com a finalidade de nos conhecermos no iMasters interCon 2007, fazermos networking e discutirmos assuntos relevantes para nossa coluna.

Se você se inscrever no iMasters InterCon 2007 até o dia 22 de outubro, irá concorrer a um pacote “Leandro Vieira” com 3 cursos (incluindo o lançamento Curso Interativo Adobe Dreamweaver CS3); e se você indicar mais 4 amigos vai concorrer a R$ 100,00 em compras na TI Shop no dia evento. Confira mais detalhes sobre a promoção no meu blog sobre desenvolvimento web.

Hoje falaremos sobre um plugin que criei para a jQuery, o jQuery lightBox plugin. A idéia de criar esse plugin surgiu após o artigoGaleria de imagens dinâmica com PHP, Spry e o Lightbox 2 – Conclusão. Onde utilizei o Lightbox JS 2.0 que utiliza a biblioteca JavaScript Prototype. Como minha preferência no momento é a utilização da jQuery, resolvi adaptá-lo para essa fantástica biblioteca.

Como eu disse, o jQuery lightBox plugin foi inspirado no Lightbox JS criado pelo Lokesh Dhakar. O qual tem o objetivo de exibir imagens sobre a página em que ela se encontra de forma fácil, simples, intuitiva e não-obstrutiva. Recomendo a leitura da série Tudo sobre Javascript não-obstrutivo do amigo Metzen, Gerente de Desenvolvimento do iMasters.

Acesse o site do jQuery lightBox plugin e veja-o em ação clicando na aba Example.. Este é o resultado que iremos produzir no decorrer deste artigo.

Primeiramente faça o download do jQuery lightBox plugin. O arquivo ZIP baixado contém os seguintes arquivos: jquery.js e jquery.lightbox-0.2.js. Ambos na pasta js; o primeiro refere-se a biblioteca JavaScript jQuery; o segundo a versão 0.2 do jQuery lightBox plugin.

O arquivo jquery.lightbox-0.2.css, localizado na pasta css, é utilizado na estilização do jQuery lightBox plugin.

A pasta images contém as imagens utilizadas, são elas:

• lightbox-ico-loading – gif animado para simular o efeito loading;
• lightbox-btn-next – botão de avançar;
• lightbox-btn-prev – botão de voltar;
• lightbox-btn-close – botão de fechar;
• lightbox-blank – imagem não exibida, mas utilizada pelo engine do jQuery lightBox plugin.

As imagens podem ser traduzidas, modificadas e estilizadas para atender a identidade visual do projeto em que você está envolvido.

Uma vez baixado e conhecido os arquivos e suas respectivas funcionalidades, vamos conhecer a forma de utilizá-lo em nossos projetos.

A primeira coisa que precisamos ter em mente é que o jQuery lightBox plugin é utilizado para exibir uma imagem sobre a página em questão. O que significa dizer que a página que irá utilizá-lo precisa exibir as imagens desejadas. Porém, tais imagens precisam estar englobadas por um link respectivo a cada uma delas. Desta forma, se o usuário estiver com o JavaScript desabilitado em seu navegador, o que impossibilitará o jQuery lightBox plugin de funcionar, ele será redirecionado para a exibição da imagem e não será prejudicado quanto ao seu objetivo. Isto é, visualizar a imagem desejada.

Com essa lógica em mente, precisaremos criar uma marcação HTML da seguinte forma:

<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

Ou seja, exibimos um thumbnail da image1, thumb_image1.jpg, através da tag IMG, porém englobando-a com um link para a image1.jpg.

Você poderá inserir quantas imagens forem necessárias. Para diferenciar os links que serão utilizados pelo jQuery lightBox plugin do restante da página, você pode definir alguma marcação extra. Por exemplo, adicionar uma classe, um atributo rel, colocar todos os links dentro de uma div, ou o que desejar.

Para o Lightbox JS criado pelo Lokesh Dhakar funcionar, você precisa definir um atributo rel com o valor lightbox. Mas, o jQuery lightBox plugin é mais flexível. E você define como deseja que ele funcione, e não ao contrário. Graças ao poder e flexibilidade dos seletores da jQuery.

Sendo assim, vamos levar em consideração a marcação HTML definida abaixo:

<div id="galeria">
	<ul>
    	<li>
        	<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>
        </li>
    	<li>
        	<a href="image2.jpg"><img src="thumb_image2.jpg" width="72" height="72" alt="" /></a>
        </li>
    	<li>
        	<a href="image3.jpg"><img src="thumb_image3.jpg" width="72" height="72" alt="" /></a>
        </li>
    </ul>
</div>

Como você percebeu, temos uma lista não-ordenada com os links e as imagens desejadas dentro de uma div com o ID galeria. Marcação HTML pronta, vamos aplicar o jQuery lightBox plugin na página.

Primeiramente, adicione os arquivos JavaScript no header da sua página. Observe:

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

Após, inclua o arquivo CSS, ainda no header.

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.2.css" media="screen" />

Tendo incluído os arquivos necessários. Vamos ativar o jQuery lightBox plugin. Observe:

<script type="text/javascript">
$(function() {
   $('#galeria a').lightBox(); // Seleciona todos os links dentro do elemento com ID galeria
});
</script>

Simples. Se você não tem um breve conhecimento sobre a jQuery. Pode não ter compreendido o que fizemos acima. Levando isso em consideração, vou explicar o que fizemos.

$(function() {
...
});

Simplistamente falando, o código acima seria algo como:

window.onload = function() {
...
}

Porém, uma versão melhorada que não discutirei nesse artigo, por fugir do escopo deste tutorial. Recomendo a esta leitura sobre o assunto Launching Code on Document Ready (em inglês).

Em seguida, temos o a função dólar da jQuery que para este exemplo utilizou de seletores CSS para informar a jQuery quais elementos na página selecionar. Como nossos links estão dentro da DIV com ID galeria, utilizamos o seguinte:

$('#galeria a').lightBox();

Após a seleção, $(‘#galeria a’), dos elementos, aplicamos o plugin a eles. Pronto, somente. Já temos o jQuery lightBox plugin em funcionamento.

Se você já utiliza o Lightbox JS e gostaria de migrar para o jQuery lightBox plugin, você pode usar a seguinte seleção de elementos:

$('a[@rel*=lightbox]').lightBox();

Ou seja, utilizamos o XPATH para selecionar todos os links que contenha o valor lightbox em seu atributo rel.

O primeiro motivo que levaria você a migrar para o jQuery lightBox plugin seria o fato dele utilizar a jQuery, outros motivos listo abaixo:

O Lightbox JS, além do seu próprio arquivo, precisa de mais três arquivos: a biblioteca JavaScript Prototype, a biblioteca de efeitos Scriptaculous e o arquivo effects.js para ser utilizado junto a ela. Já o jQuery lightBox plugin, além do seu próprio arquivo, precisa somente de um arquivo, o da jQuery. Essa diminuição de arquivos, significa que o aplicativo irá carregar mais rápido, será menos requisição HTTP e você terá economia de banda.

Com o Lightbox JS você está fadado a utilizar o atributo rel nos links com o valor lightbox. Já com o jQuery lightBox plugin você define como sua marcação HTML deve ser.

Tanto o Lightbox JS quanto o jQuery lightBox plugin permite que você altere alguns aspectos de configuração em seus respectivos arquivos. Porém esse último, permite que você altere algumas configurações ao chamá-lo, dessa forma, você poderá ter várias chamadas para o jQuery lightBox plugin na mesma página e cada uma delas com configurações distintas. Por exemplo:

<script type="text/javascript">
$(function() {
   $('a[@rel*=lightbox]').lightBox({
	overlayBgColor: '#FFF',
	overlayOpacity: 0.6,
	imageLoading: 'http://example.com/images/loading.gif',
	imageBtnClose: 'http://example.com/images/close.gif
   });
});
</script>

No exemplo acima, definimos os quatro parâmetros passíveis de serem configurados na versão 0.2 do jQuery lightBox plugin. O primeiro deles, overlayBgColor, define qual a cor que irá encobrir o body da página; o segundo, overlayOpacity, define a opacidade que esse encobrimento terá; já o terceiro e quarto define a localização das imagens de carregamento e do botão de fechar, respectivamente. A ordem dos parâmetros não precisa ser necessariamente como demonstrada acima, sinta-se à vontade.

Espero que tenham gostado e que o jQuery lightBox plugin seja útil a vocês. Fique atento aos novos lançamentos do referido plugin em seu site. Se tiver alguma dúvida, sugestão ou dificuldade em incrementá-lo, utilize meu fórum para conversarmos a respeito.

Um abraço a todos.