Cómo crear una galería de imágenes con jquery, javascript y bootstrap
by Bitácora Web
Retomamos los artículos de BitacoraWeb explicando cómo crear una galería de imágenes de manera sencilla utilizando bootstrap con la librería javascript lightbox.
En primer lugar debemos incluir bootstrap para que nos facilite el trabajo para colocar las imágenes y de hacer nuestra galería responsive, con lo que incluiremos los css y js de bootstrap dentro del <head>:
1 2 3 | <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> |
Como podéis ver, ya hemos incluido la libreria jquery que será necesaria a posteriori.
Ahora crearemos la estructura de la galería utilizando las etiquetas <articles> y <article> propias de html5:
1 2 3 4 5 6 7 8 9 10 11 12 | <articles class="row"> <article class="col-md-3"> <a href="images/img1.jpg" data-lightbox="example-set" data-title="Regala"> <img src="images/img1.jpg" alt="Regala" class="img-thumbnail"></a> <p>Regala</p> </article> <article class="col-md-3"> <a href="images/img2.jpg" data-lightbox="example-set" data-title="Descansa"> <img src="images/img2.jpg" alt="Descansa" class="img-thumbnail"></a> <p>Descansa</p> </article> </articles> |
A través de las clases le indicamos a bootstrap como debe de actuar con el elemento que posee esa clase. A <articles> le asignamos la clase “row” para indicarle que ocupará toda la fila, y en cada <article>, que contiene cada imagen, le asignamos la clase “col-md-3” lo cual nos permitirá tener hasta un máximo 4 imágenes en la misma fila pero reduciendo el número de imágenes según el tamaño del dispositivo con el que lo visualizamos.
Bootstrap interpreta 12 espacios para colocar los elementos, por eso si la columna ocupa 3 según la clase “col-md-3” el máximo serán 4 elementos(<article> en este caso), si les asignáramos “col-md-4” como máximo serían 3 elementos.
Para más información sobre bootstrap:
https://getbootstrap.com/examples/grid/
Ahora, dentro de cada <article> le añadimos la imagen con la clase “img-thumbnail” para la librería lightbox:
1 | <img src="images/img1.jpg" alt="Regala" class="img-thumbnail"> |
También para el efecto lightbox tendremos que ponerla dentro un enlace(<a>) con los data-lightbox (sirve para agrupar las imágenes en un mismo lightbox o en varios diferentes) y data-title (sirve para mostrar el título que le pongamos en el lightbox):
1 2 3 | <a href="images/img2.jpg" data-lightbox="example-set" data-title="Descansa"> <img src="images/img2.jpg" alt="Descansa" class="img-thumbnail"> </a> |
También le pondremos al pie de cada imagen un <p> con el nombre para la imagen:
1 | <p>Descansa</p> |
Con lo que llevamos ya deberíamos tener lo suficiente para que se mostrara la galería pero nos faltaría darle funcionalidad al lightbox. Para ello le añadimos el css de lighbox dentro del <head>:
1 | <link rel="stylesheet" href="lightbox/css/lightbox.min.css"> |
Y justo antes de cierre del body le añadimos la parte javascript de lightbox:
1 2 3 4 5 6 | <script src="lightbox/js/lightbox.min.js"></script> <script> lightbox.option({ 'albumLabel': "Imagen %1 de %2" }) </script> |
Le hemos añadido la opción ‘albumLabel’ para que muestre el número de imagen actual con el total dentro del lightbox.
Más información sobre Lighbox: http://lokeshdhakar.com/projects/lightbox2/
Y con esto ya tendríamos nuestra galería.
Os dejo la demo online:
http://bitacoraweb.info/code/crear-galeria-javascript-jquery-bootstrap/
Y el descargable:
Descargas realizadas: 1.667
Espero que te sirva, si es así comparte.
Recommended Posts
Cómo migrar wordpress manualmente
06/11/2017
Excelente artículo.
Pero para que todas las imágenes tengan el mismo ancho, ¿Qué se debe hacer?
Gracias
Hola Magda, gracias por tu comentario.
Creo que puedes hacerlo poniendo el height y width en los tags IMG (o por CSS) aunque deformaria las imagenes para adaptarlas, quizás es mejor retocar las imagenes.
Saludos.
Holaaa me gustaria saber si puedes modificar este codigo pero para agregar videos, es decir, si puedes crear una galeria de videos y que se reproduzcan similarmente, pero que sean videos. Muchas gracias por tu atencion. me seria de mucha utilidad para una idea que tengo. Gracias
Hola Rodolfo,
Debería funcionarte si pones dentro de cada
un reproductor de video.
Saludos.