creación de una galería de imagenes con html y jquery

4
Creación de Una Galería de Imagens con Html y JQuery Archivo HTML <section class="content"> <article> <div class="sliderGrande"> <div id="grande1" class="grande" > <img src="https://encrypted- tbn2.gstatic.com/images?q=tbn:ANd9GcTtWYiAFmvTv0GaQHrkgViiuMr5f- 33WSYNRlcDvdtHNfalcmt3EbgRPw" alt=""> </div> <div id="grande2" class="grande"><img src="https://encrypted- tbn3.gstatic.com/images?q=tbn:ANd9GcQdi6zGgzSasSMSQvnSHkuI34wr18hPyOqpFPMtW7F1I4Hba 0fY" alt=""> </div> <div id="grande3" class="grande"><img src="http://www.imagenesbonitas.name/covers/preview/imagenes_bonitas_para_facebook_mis_fa ns.jpg" alt=""></div> </div> <div class="sliderPequeno"> <div id="pequeno1" class="pequeno" ><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTtWYiAFmvTv0GaQHrkgViiuMr5f- 33WSYNRlcDvdtHNfalcmt3EbgRPw" alt=""> </div> <div id="pequeno2" class="pequeno"><img src="https://encrypted- tbn3.gstatic.com/images?q=tbn:ANd9GcQdi6zGgzSasSMSQvnSHkuI34wr18hPyOqpFPMtW7F1I4Hba 0fY" alt=""> </div> <div id="pequeno3" class="pequeno"><img src="http://www.imagenesbonitas.name/covers/preview/imagenes_bonitas_para_facebook_mis_fa ns.jpg" alt=""></div> </div> </article> <p></p> </section>

Upload: ruben-franco

Post on 19-Aug-2015

8 views

Category:

Documents


6 download

DESCRIPTION

El archivo Creación de Una Galería de Imágenes con Html y JQuery, lo he elaborado pensando en todas aquellas personas que desean hacer desde cero un slider de imágenes que valle cambiando de acuerdo a la imagen en miniatura que se le haga clic.

TRANSCRIPT

Creacin de Una Galera de Imagens con Html y JQuery Archivo HTML

Este es el pie de pgina - codigoprogramacion.com Archivo JS $(document).ready(function(){ $('#grande'+1).slideDown(); //var t=setInterval(function(){avanzar();},3000); $('.pequeno').click(function(e){ var elemento = e.target.parentNode; var id = elemento.id; varn=parseInt(id.charAt(7)); $('.grande').slideUp(); //Lo enconde a todos $('#grande'+n).slideDown();//Muestra solo el que tiene este id }); var emergente=function(src){ $('#popuImg').attr("src", src); $('#popup').fadeIn('slow'); $('.popup-overlay').fadeIn('slow'); $('.popup-overlay').height($(window).height()); return false; }; $('.grande').click(function(e){ var elemento = e.target.parentNode; var id = elemento.id; varn=parseInt(id.charAt(6)); var src=$('#grande'+n+' img').attr("src"); emergente(src); }); $('#close').click(function(){ $('#popup').fadeOut('slow'); $('.popup-overlay').fadeOut('slow'); return false; }); });