LightBox com Mootools

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.

javascript
<script src="mootools.js" type="text/javascript"></script>
<script src="sexylightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

Usabilidade

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

javascript
<script type="text/javascript">
window.addEvent('domready', function() {
new SexyLightBox({find:'sexylightbox'});
 
});
 
</script>

É 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.

css
new SexyLightBox({find:'sexylightbox', color:'white'});
 

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

css
new SexyLightBox({find:'sexylightbox', color:'white', OverlayStyles:{'background-color':'#000'} });
 

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

css
new SexyLightBox({find:'sexylightbox', color:'white', OverlayStyles:{'background-color':'#000'},captionColor:'#FFF'  });
 

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

css
new SexyLightBox({find:'sexylightbox', color:'white', OverlayStyles:{'background-color':'#000'},captionColor:'#FFF', showDuration:200, closeDuration:400   });
 

Integrar a LightBox

html
<a href="imagem1.jpg"  class="sexylightbox" rel="galeria">titulo 1</a>
<a href="imagem2.jpg"  class="sexylightbox" rel="galeria">titulo 2</a>
<a href="imagem3.jpg"  class="sexylightbox" rel="galeria">titulo 3</a>

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

Exemplos

Imagens sozinhas


Galeria

Download dos ficheiros referidos no artigo:

SexyLightBox

[ ]

629 Kb

TrackBack URI for this entry

Pedro Agosto 28, 2008	Obrigado! era mesmo isto que queria! so vai dar algum trabalho a editar as imagens das bordas ao meu gosto! obrigado!
Xpto Setembro 01, 2008	Esta solução de lightbox está exelente! pena utilizar mootools e não jquery, que é a framework que utilizo no meu website. mas começo a ficar rendido ao poder do mootools
Jon R Setembro 02, 2008	Espectacular!!! Isto dá para implementar no blogger?
Goncalo M Setembro 03, 2008 http://weblouca.com	Sim dá para implementar no blogger/blogspot... dentro em breve irei explicar como...
Artur Setembro 17, 2008	muito bom. diga uma coisa: como você fez para que a propaganda em flash fique por baixo da camada que ele cria? valeu
Gonçalo M Setembro 19, 2008 http://weblouca.com	Olá Artur, realmente colocou ai uma questão pertinente. Teoricamente éra so criar uma nova div e colocar o flash no interior com "z-index:0;", no entanto ao que parece isto não resulta só por si! Faça uma pesquisa no google por "wmode" ou "flash wmode". http://www.sitepoint.com/forums/showthread.php?t=158317 http://www.sitepoint.com/forums/showpost.php?p=3164991&postcount=44 Colocou uma questão bastante pertinente e que irá merecer um artigo sobre o assunto da minha parte num futuro proximo! de momento forneço-lhe os dois links acima, para ir se ir divertindo ;) Obrigado Gonçalo
Tata Outubro 08, 2009 http://www.nova.com.br	cara muito bom,. rapido e pratico valeu ae