Lightboxes Rápidos E Leves Com jQuery Litebox

Já há algum tempo, não é nenhuma novidade um site ter algum tipo de script lighbox para exibir imagens, fotos ou qualquer outro tipo de imagem ou conteúdo textual. Alguns anos atrás, os sites que se valiam deste recurso eram vistos com espanto e admiração, pois, na época, o recurso de lightbox era inovador.

Hoje já não é mais assim, e é muito comum qualquer site que tenha que exibir imagens usar alguns dos, literalmente, milhares de lightboxes existentes. Na verdade, o foco, hoje, além da beleza do efeito, está na rapidez e simplicidade com que o efeito acontece, ou seja, está focado mais na usabilidade.

E é para quem está buscando um efeito lighbox que tenha simplicidade, rapidez e leveza que existe o jQuery Litebox!

O jQuery Litebox não tem nada de extraordinário, em comparação a outros scripts de lighbox, mas, como citado, seu ponto forte é ser rápido e leve, além de funcionar com configurações mínimas e estar pronto para uso em segundos. E mais: o Litebox não precisa de imagens funcionar!

Usando  o jQuery Litebox

A primeira coisa a se fazer, como de costume, é baixar o jQuery Litebox. Depois disso, é preciso inserir os javascripts necessários para seu funcionamento nas páginas em que se queira usá-lo (apontando os arquivos corretamente, segundo sua estrutura de pastas e, de preferência, sempre a versão mais atual do jQuery):

Segundo o comportamento padrão do Litebox, ele sempre exibirá o que está dentro da div com id “litebox” na página. Também, o trigger de fechamento sempre se dará através de um elemento com id “close” (geralmente, um link “X”) dentro do elemento #litebox. Então, por padrão, é preciso ter um trecho HTML como:

E pronto, seu Litebox já está pronto para funcionar! Obviamente que é possível dar uma “vida” adicionando algum estilo através de CSS, mas, como “prometido”, o script já funciona em poucos segundos! Para fins de testes, vamos nos valer do seguinte CSS (faça, você, o que melhor se aplica ao web design de seu site):


#litebox {
background:#FF9900;
color:#FFF;
height:200px;
text-align:center;
width:400px;
}

#litebox #close {
cursor:pointer;
position:absolute;
right:10px;
top:10px;
}


Para seu funcionamento, basta o javascript:

$('#exemplo').litebox();


Opções do jQuery Litebox

Algumas poucas opções pode ajudar à obtenção de uma melhor customização e uso do script:


$('#exemplo').litebox({
// ID do conteúdo do litebox
target : 'litebox',

// Velocidade (ms) que a tela "desescurece"
overlayHideSpeed : 100
});


Então, se fosse preciso o uso do litebox em uma div de id “comunicado”, cujo lightbox apareceria em 650 milissegundos, o código seria:

$('#exemplo').litebox({
target : 'comunicado',
liteboxShowSpeed : 650
});


Conclusão sobre Litebox

Realmente o jQuery Litebox é um script muito leve e muito fácil e simples de se usar. Principalmente para sites que já não tenham tanta performance, utilizá-lo como solução para lightbox (ou substituir algum já existente) pode ser uma boa pedida!

Lembrando que, com um pouco mais de jQuery, é possível melhorar ainda mais o uso do script, alterando o conteúdo da div de funcionamento dinamicamente para não ficar “travado” a exibir somente um conteúdo como Litebox. Mas isso é assunto para outro artigo…  😉