26 Agosto 2008 Escrito por Gonçalo Martins

Recebi um email do Pedro Rafael, que me perguntava se sabia de alguma solução género lightbox que lhe permitisse customização total, ou bastante customização em termos de aspecto!

 

Apesar de existirem por ai bastantes soluções do género, a melhor de todas e que mais customização permite, foi criada recentemente pelo Eduardo, que escreve no www.coders.me.

 

A implementação desta lightbox é extremamente simples uma vez que corre sobre a Framework Mootools.

 

Instalação

Faça o load da Framework, do script sexylightbox e do Css, antes de </head> no seu seu website.

 

 

 

Usabilidade

O código abaixo cria a lightbox. Pode coloca-lo tambem  antes de </head>.

 

 

É na linha 'new SexyLightBox();', que reside o segredo da customização que esta solução oferece!

 

Por defeito as bordas da lightbox são negras, no entanto, pode optar por que sejam brancas.

 

 

 

Pode ainda escolher a cor de fundo que deseja que cubra o ecra, por exemplo se quiser que seja negro

 

 

 

Pode escolher a cor dos comentários no fundo da imagem

 

 

 

Pode ainda defenir a velocidade com que a lightbox abre e fecha

 

 

 

Integrar a LightBox

 

 

 

 

onde href="/..." é o link para a imagem, class="..."  foi defenido em 'new SexyLightBox({find:'sexylightbox'});' e rel="..." caso pretenda criar uma galeria de imagens

 

window.addEvent('domready', function() { new SexyLightBox({find:'sexylightbox', OverlayStyles:{'background-color':'#000'}, showDuration:200, closeDuration:400, captionColor:'#FFF'}); new SexyLightBox({find:'branco', OverlayStyles:{'background-color':'#fff'}, color:'white', showDuration:200, closeDuration:400, hexcolor:'#FFFFFF', captionColor:'#000'}); });

Exemplos

 

Imagens sozinhas


Galeria