Como hacer una galería de fotos con JQuery
En este ejemplo vamos a hacer una galería de imágenes con JQuery. El objetivo es intentar explicar la lógica y la estructura de una galería de este tipo, hay cosas que se pueden (o se deben) hacer de otra forma, pero el objetivo en este caso es hacer una galería sencilla.
La estructura HTML para nuestra galería va a ser esta:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<body> <div id="gallery"> <ul class="wrapper"> <li><img src="img/1.jpg" alt=""></li ><li><img src="img/2.jpg" alt=""></li ><li><img src="img/3.jpg" alt=""></li ><li><img src="img/4.jpg" alt=""></li ><li><img src="img/5.jpg" alt=""></li ><li><img src="img/6.jpg" alt=""></li> </ul> <div class="nav"> <i class="anterior disabled fa fa-angle-double-left" onClick="galeriaAnterior();"></i> <i class="siguiente fa fa-angle-double-right" onClick="galeriaSiguiente();"></i> </div> </div> </body> |
Es decir, tenemos un div#gallery, al que vamos a poner un ancho del 100% y un ancho máximo de 800px para que se adapte al ancho de pantalla pero sin llegar a ser demasiado grande.
Dentro tenemos un ul.wrapper, al que por Javascript vamos a dar después un ancho del 600% (100 * el número de elementos que tenemos). Esto lo hacemos por Javascript para que si añadimos otro elemento a la galería no hay que tocar nada en los estilos y el ancho del contenedor se actualice directamente.
Dentro de este ul, tenemos los li que contienen las imágenes. A estos li les asignaremos por Javascript ancho de 100% / el número de elementos que tenemos.
Por último tenemos dos botones de anterior y siguiente, que llamar a dos funciones Javascript. Para estos botones he utilizado iconos font-awesome.
En cuanto al CSS que vamos a utilizar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
#gallery{ width:100%; max-width:800px; margin:0px auto; overflow: hidden; } #gallery ul.wrapper{ list-style-type: none; padding: 0px; margin: 0px; } #gallery .wrapper li{ display:inline-block; } #gallery .wrapper li img{ width:100%; height:auto!important; vertical-align: bottom; border:0; } .nav{text-align:center;} .fa{ cursor:pointer; font-size:36px; } .fa.disabled{opacity:.3;cursor:default;} .fa + .fa{ margin-left:10px;} |
Y el código Javascript comentado:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
/* En estas dos variables vamos a almacenar el número total de elementos y el elemento que se está mostrando actualmente */ var gal_n_elem = 0; var gal_page = 1; /* Cuando el documento está listo, miramos el número de elementos que tenemos, y hacemos que el .wrapper tenga un ancho de 100*gal_n_elem %. Es decir, si tenemos 6 elementos, el wrapper tendrá que medir 600% de ancho para albergar las 6 imágenes. Después hacemos que cada li mida 100/6 % del padre. */ $(document).ready(function(){ gal_n_elem = $('#gallery .wrapper li').length; $('#gallery .wrapper').width(gal_n_elem * 100 + '%'); $('#gallery .wrapper li').width(100 / gal_n_elem + '%'); }) /* Esta función se ejecuta al pulsar el botón anterior. Si no estamos en la página 1, cargamos la página anterior */ function galeriaAnterior(){ if(gal_page < 2) return; galeriaCargarPagina(gal_page - 1); } /* Esta función se ejecuta al pulsar el botón siguiente. Si no estamos en la última página, cargamos la página anterior */ function galeriaSiguiente(){ if(gal_page > gal_n_elem-1) return; galeriaCargarPagina(gal_page + 1); } /* Esta es la función para mostrar una página. Modifica el margin-left del wrapper para mostrar la página solicitada. En esta función controlamos también si los botones de anterior y siguiente deben estar deshabilitados. */ function galeriaCargarPagina(n){ gal_page = n; if(n > 1){ $('#gallery .anterior').removeClass('disabled'); }else{ $('#gallery .anterior').addClass('disabled'); } if(n < gal_n_elem){ $('#gallery .siguiente').removeClass('disabled'); }else{ $('#gallery .siguiente').addClass('disabled'); } $('#gallery .wrapper').animate({"margin-left":-100 * (n-1) + '%'},500); } |
Las imágenes para esta galería son de Cristina Salas.
Y los archivos fuente:
Descargar fuentes