Cómo crear una galería de imágenes con jquery, javascript y bootstrap

Cómo crear una galería de imágenes con jquery, javascript y bootstrap




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>:

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:

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:

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):

También le pondremos al pie de cada imagen un <p> con el nombre para la imagen:

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>:

Y justo antes de cierre del body le añadimos la parte javascript de lightbox:

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:

Download

Descargas realizadas: 372

Espero que te sirva, si es así comparte.

 





Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies