Jquery: Mini galería de imágenes
Categories: AJAX - Tags: jqueryEsta es una pequeña galería de imágenes ideal para mostrar por ejemplo varias fotos de un producto en una tienda virtual, pero con una pequeña animación para hacerlo más atractivo.
La implementación es muy sencilla como pueden ver:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div id="gallery"> <div id="gallery_nav"> <a rel="img1" href="javascript:;"><img src="iphone_1.png" /></a> <a rel="img2" href="javascript:;"><img src="iphone_2.png" /></a> <a rel="img3" href="javascript:;"><img src="iphone_3.png" /></a> <a rel="img4" href="javascript:;"><img src="iphone_4.png" /></a> </div> <div id="gallery_output"> <img id="img1" src="iphone_1b.jpg" /> <img id="img2" src="iphone_2b.jpg" /> <img id="img3" src="iphone_3b.jpg" /> <img id="img4" src="iphone_4b.jpg" /> </div> <div class="clear"></div> </div> |
Y el javascript para hacerla funcionar:
1 2 3 4 5 6 7 8 9 10 | $(document).ready(function() { $("#gallery_output img").not(":first").hide(); $("#gallery a").click(function() { if ( $("#" + this.rel).is(":hidden") ) { $("#gallery_output img").slideUp(); $("#" + this.rel).slideDown(); } }); }); |
muy bueno el efecto, gracias por compartirlo.
Buenisima galeria, la utilizaré pronto en alguno de mis proyectos.
Saludos
Oye, eres un fenomeno! todo tipo de info y todo bien explicado! felicidades!
El link está roto