quinta-feira, 21 de agosto de 2008

LightBox - efeito interessante

Você com certeza já viu em sites de conteúdo um efeito interessante ao clicar nas fotos que o site publica. Uma camada se abre com um efeito interessante e a foto aparece.
Veja como é simples implementar...
importe os seguintes js


<script src="http://www.prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js" type="text/javascript"></script>
<script src="http://www.huddletogether.com/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="http://www.huddletogether.com/js/lightbox.js" type="text/javascript"></script>


importe agora um css(estilo)

<link rel="stylesheet" href="http://www.huddletogether.com/css/lightbox.css" type="text/css" media="screen">


repare agora, como ficará sua tag <a< e a tag <img<

<a href="http://www.huddletogether.com/projects/lightbox2/images/image-1.jpg" rel="lightbox" onclick="javascript:pageTracker._trackPageview ('/outbound/www.huddletogether.com');"><img src="http://www.huddletogether.com/projects/lightbox2/images/thumb-1.jpg" alt="" border="1" height="40" width="100" />
<a href="http://www.huddletogether.com/projects/lightbox2/images/image-2.jpg" title="Optional caption." rel="lightbox" onclick="javascript:pageTracker._trackPageview ('/outbound/www.huddletogether.com');"><img src="http://www.huddletogether.com/projects/lightbox2/images/thumb-2.jpg" alt="" border="1" height="40" width="100" /></a></a></p><a href="http://www.huddletogether.com/projects/lightbox2/images/image-2.jpg" title="Optional caption." rel="lightbox" onclick="javascript:pageTracker._trackPageview ('/outbound/www.huddletogether.com');">

só isso,clique na foto para ver o efeito




Nenhum comentário: