Crear una galería de imágenes modal con componentes Bootstrap

¿Alguna vez ha hecho clic en una imagen en una página web que abre una versión más grande de la imagen con navegación para ver otras fotos?

Algunas personas lo llaman ventana emergente. Otros lo llaman caja de luz. Bootstrap lo llama modal. Menciono Bootstrap porque quiero usarlo para hacer el mismo tipo de cosas. Entonces, llamémoslo modal de ahora en adelante.

¿Por qué Bootstrap? podrías preguntar. Bueno, algunas razones:

• Ya estoy usando Bootstrap en el sitio donde quiero este efecto, por lo que no hay gastos adicionales en términos de carga de recursos.
• Quiero algo en lo que tenga un control total y sencillo sobre la estética. Bootstrap es un borrón y cuenta nueva en comparación con la mayoría de los complementos modales que encontró.
• La funcionalidad que necesito es bastante simple. No se gana mucho codificando todo desde cero. Considere que el tiempo que ahorra al utilizar el marco Bootstrap es más beneficioso que cualquier posible inconveniente.

Aquí es donde terminaremos:

Repasemos eso poco a poco.

Paso 1: crea la cuadrícula de la galería de imágenes

Comenzamos con el marcado para un diseño de cuadrícula de imágenes. Podemos usar el sistema de cuadrícula de Bootstrap para eso.

div  div    img src="/image-1"  /div  div    img src="/image-2"  /div  div    img src="/image-3"  /div  div    img src="/image-4"  /div/div

Ahora necesitamos atributos de datos para que esas imágenes sean interactivas. Bootstrap analiza los atributos de los datos para determinar qué elementos deben ser interactivos y qué deben hacer. En este caso, crearemos interacciones que abran el componente modal y permitamos desplazarse por las imágenes usando el componente carrusel.

Acerca de esos atributos de datos:

1. Agregaremos data-toggle="modal"y data-target="#exampleModal"al elemento padre (#gallery). Esto hace que al hacer clic en cualquier cosa en la galería se abra el modal. También deberíamos agregar el valor de destino de datos ( #exampleModal) como ID del modal en sí, pero lo haremos una vez que lleguemos al marcado modal.
2. Agregamos data-target="#carouselExample"un data-slide-toatributo a cada imagen. En su lugar, podríamos agregarlos a los voltorios de imágenes, pero usaremos las imágenes en esta publicación. Más adelante, querremos usar el valor de destino de datos ( #carouselExample) como ID para el carrusel, así que tenlo en cuenta para cuando lleguemos allí. Los valores de data-slide-tose basan en el orden de las imágenes.

Esto es lo que obtenemos cuando juntamos eso:

div data-toggle="modal" data-target="#exampleModal"  div    img src="/image-1.jpg" data-target="#carouselExample" data-slide-to="0"  /div  div    img src="/image-2.jpg" data-target="#carouselExample" data-slide-to="1"  /div  div    img src="/image-3.jpg" data-target="#carouselExample" data-slide-to="2"  /div  div    img src="/image-4.jpg" data-target="#carouselExample" data-slide-to="3"  /div/div

¿Interesado en saber más sobre los atributos de los datos? Consulta la guía CSS-Tricks para ellos.

Paso 2: hacer que el modal funcione

Este es un carrusel dentro de un modal, los cuales son componentes estándar de Bootstrap. Aquí simplemente estamos anidando uno dentro del otro. Prácticamente un trabajo directo de copiar y pegar de la documentación de Bootstrap.

Sin embargo, aquí hay algunas partes importantes a tener en cuenta:

1. El ID modal debe coincidir con el data-targetdel elemento de la galería.
2. El ID del carrusel debe coincidir con el data-targetde las imágenes de la galería.
3. Las diapositivas del carrusel deben coincidir con las imágenes de la galería y deben estar en el mismo orden.

Aquí está el marcado para el modal con nuestros atributos implementados:

!-- Modal markup: https://getbootstrap.com/docs/4.4/components/modal/ --div tabindex="-1" role="dialog" aria-hidden="true"  div role="document"    div      div        button type="button" data-dismiss="modal" aria-label="Close"          span aria-hidden="true"×/span        /button      /div      div              !-- Carousel markup goes here --
      div        button type="button" data-dismiss="modal"Close/button      /div    /div  /div/div

¡Podemos colocar el marcado del carrusel allí mismo, al estilo Voltron!

!-- Modal markup: https://getbootstrap.com/docs/4.4/components/modal/ --div tabindex="-1" role="dialog" aria-hidden="true"  div role="document"    div      div        button type="button" data-dismiss="modal" aria-label="Close"          span aria-hidden="true"×/span        /button      /div      div              !-- Carousel markup: https://getbootstrap.com/docs/4.4/components/carousel/ --      div data-ride="carousel"          div            div              img src="/image-1.jpg"            /div            div              img src="/image-2.jpg"            /div            div              img src="/image-3.jpg"            /div            div              img src="/image-4.jpg"            /div          /div          a href="#carouselExample" role="button" data-slide="prev"            span aria-hidden="true"/span            spanPrevious/span          /a          a href="#carouselExample" role="button" data-slide="next"            span aria-hidden="true"/span            spanNext/span          /a        /div      /div      div        button type="button" data-dismiss="modal"Close/button      /div    /div  /div/div

Parece mucho código, ¿verdad? Nuevamente, es básicamente sacado directamente de los documentos de Bootstrap, solo que con nuestros atributos e imágenes.

Paso 3: lidiar con los tamaños de imagen

Esto no es necesario, pero si las imágenes en el carrusel tienen diferentes dimensiones, podemos recortarlas con CSS para mantener la coherencia. Tenga en cuenta que estamos usando Sass aquí.

// Use Bootstrap breakpoints for consistency.$bootstrap-sm: 576px;$bootstrap-md: 768px;$bootstrap-lg: 992px;$bootstrap-xl: 1200px;
// Crop thumbnail images.#gallery {  img {    height: 75vw;    object-fit: cover;        @media (min-width: $bootstrap-sm) {      height: 35vw;    }        @media (min-width: $bootstrap-lg) {      height: 18vw;    }  }}
// Crop images in the coursel.carousel-item {  img {    height: 60vw;    object-fit: cover;        @media (min-width: $bootstrap-sm) {      height: 350px;    }  }}

Paso 4: optimiza las imágenes

Es posible que hayas notado que el marcado utiliza los mismos archivos de imagen en la galería que nosotros en el modal. No tiene por qué ser así. De hecho, es una mejor idea utilizar versiones más pequeñas y de mayor rendimiento de las imágenes para la galería. De todos los modos, ampliaremos las imágenes a su versión de tamaño completo en el modal, por lo que no es necesario tener la mejor calidad desde el principio.

Lo bueno del enfoque de Bootstrap aquí es que podemos usar imágenes diferentes en la galería que en el modal. No son mutuamente excluyentes y tienen que apuntar al mismo archivo.

Entonces, para eso, sugeriría actualizar el marcado de la galería con imágenes de menor calidad:

div data-toggle="modal" data-target="#exampleModal"  div    img src="/image-1-small.jpg" data-target="#carouselExample" data-slide-to="0"    !-- and so on... --/div

¡Eso es todo!

El sitio donde estoy usando esto ya tiene el tema Bootstrap. Eso significa que todo ya está diseñado según las especificaciones. Dicho esto, incluso si no tienes un tema de Bootstrap, ¡aún puedes agregar fácilmente estilos personalizados! Con este enfoque (Bootstrap versus complementos), la personalización es sencilla porque tienes control total sobre el marcado y el estilo de Bootstrap es relativamente escaso.

Aquí está la demostración final: