En esta publicación vamos a construir un componente que nos permitirá convertir una cuadrícula de imágenes que después de pulsar alguna de ella estas se muestren en un carrusel de pantalla completa.
Antes de empezar vamos a mencionar los requisitos para iniciar la construcción de este componente junto con las librerías y tecnologías que vamos a necesitar.
Ver ejemplo en vivoRequerimientos:
- Conocimientos básicos de HTML, CSS y algo de JavaScript.
- Bootstrap 5.
- Editor de código (En este caso estamos utilizando VSC).
- Conocimiento básico de la herramienta para desarrollador en Chrome o similar.
En este paso a paso e iremos explicando cada bloque de código y al final el código completo junto con el ejemplo en vivo.
- Documento de inicio HTML 5.
- Cuadrícula.
- Atributos de la etiqueta img.
- Imágenes en el carrusel modal.
- Contenido del div modal-body.
- Indicadores de posición.
- Dentro del elemento carrusel.
- Código completo.
- Conclusión.
Documento de inicio HTML 5
En visual studio code iniciamos creando un documento HTML, como el que vemos a continuación.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
</body>
</html>Ahora vamos a empezar a construir la cuadrícula para las imágenes. Así, posteriormente, cuando pulsemos cada una de ellas, se desplegará un modal que nos mostrara en pantalla completa la foto y una descripción de la misma.
Cuadrícula
El código que escribiremos a continuación se explica por sí mismo, de todos modos lo iremos aclarando.
Empezamos creando un div contenedor que lo dividiremos en filas y columnas, donde cada cuadrado que conforma la parrilla colocaremos una imagen.
Recordamos que estamos trabajando con bootstrap 5, por lo tanto, estamos usando las clases y atributos de este framework. Si nos regresamos a ver el primer bloque de código podemos ver que dentro de la etiqueta head colocamos un enlace para llamar los archivos CSS de bootstrap que vamos a estar usando.
Continuando con este bloque de código, dijimos que tenemos todo dentro de un contenedor div, para crear la cuadrícula, es decir, el diseño de las filas y las columnas y alinear el contenido, bootstrap utiliza flexbox.
Utilizando la clase col dentro de row creamos tres columnas de igual ancho en todos los dispositivos y ventanas gráficas utilizando clases de cuadrícula predefinidas. De esta manera podemos crear tantas filas como columnas necesitemos, en este caso serán tres y tres.
<div class="container-xl border-top mt-5 pt-5 bg-dark">
<h4 class="text-start text-white pb-5">Galería de imágenes en cuadrícula a carrusel de pantalla completa</h4>
<!-- 1ra fila -->
<div class="row g-1 mb-1" data-bs-toggle="modal" data-bs-target="#exampleModal">
<div class="col">
<img class="image-gallery-stw" src="img/1.jpg" alt="" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0">
</div>
<div class="col">
<img class="image-gallery-stw" src="img/2.jpeg" alt="" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1">
</div>
<div class="col">
<img class="image-gallery-stw" src="img/3.jpeg" alt="" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2">
</div>
</div>
<!-- 2da fila -->
<div class="row g-1 mb-1" data-bs-toggle="modal" data-bs-target="#exampleModal">
<div class="col">
<img class="image-gallery-stw" src="img/4.jpeg" alt="" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3">
</div>
<div class="col">
<img class="image-gallery-stw" src="img/5.jpeg" alt="" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4">
</div>
<div class="col">
<img class="image-gallery-stw" src="img/6.jpg" alt="" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5">
</div>
</div>
<!-- 3ra fila -->
<div class="row g-1 mb-1" data-bs-toggle="modal" data-bs-target="#exampleModal">
<div class="col">
<img class="image-gallery-stw" src="img/7.jpg" alt="" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6">
</div>
<div class="col">
<img class="image-gallery-stw" src="img/8.jpeg" alt="" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="7">
</div>
<div class="col">
<img class="image-gallery-stw" src="img/9.jpeg" alt="" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="8">
</div>
</div>
</div>Ahora que tenemos definida la estructura, vamos a analizar los atributos data-bs-toggle=”modal” y data-bs-target=”#exampleModal”.
El atributo data-bs-toggle=”modal” nos permite alternar o mostrar la ventana modal que en este caso es la imagen que pulsamos con su descripción.
El atributo data-bs-target=”#exampleModal” nos permite identificar que ventana modal queremos abrir. Bootstrap solo permite tener abierta una sola ventana modal a vez, ya que considera que múltiples ventanas modales abiertas ofrecen una mala experiencia de usuario.
Las clases col permite manejar las columnas para que se adapten al tamaño de pantalla. Recordamos que las columnas se basan en la arquitectura flexbox de la cuadrícula.
Flexbox significa que tenemos opciones para cambiar columnas individualmente.
Atributos de la etiqueta img
Ponemos especial atención a la etiqueta img, que es la que nos permitirá colocar la imagen. Vamos a estilizar la imagen, para esto utilizamos la clase image-gallery-stw y le asignamos los siguientes estilos:
.image-gallery-stw {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}De esta forma tenemos cada imagen ajustada al 100% tanto en alto como en el ancho.
La propiedad object-fit la usamos para que la imagen se ajuste al contenedor. Sí, queremos conocer más sobre esta propiedad, poder ir a la página developer mozilla aquí.
Los atributos data-bs-target=”#carouselExampleIndicators” y data-bs-slide-to=”0″ permiten indicar la posición de las imágenes en el carrusel. Sin estos atributos no podríamos conocer la posición de la imagen cuando la pulsemos.
Imágenes en el carrusel modal
Vamos a empezar a analizar el componente modal de bootstrap y entender cómo funciona. Para esto vamos a ver los principales atributos y que es lo que hace cada uno.
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content bg-dark">
<div class="modal-header">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-white">
<!-- EN ESTE LUGAR ES DONDE VA A EL CARRUSEL DE IMÁGENES -->
</div>
</div>
</div>
</div>Empezamos con la clase modal, la cual es la principal y está en el nivel de jerarquía más alto. Le estamos diciendo al bloque de código que todo lo que estará dentro de ese contenedor adoptará los estilos y funciones propios de la clase.
El atributo id es fundamental, ya que es el encargado de portar el identificador principal que corresponde a ese modal.
El atributo tabindex=”-1″ significa que no se puede acceder al elemento mediante la navegación del teclado, pero se puede enfocar usando la función de enfoque en JS. Si se quiere conocer más de que trata este atributo, recomiendo leer esta publicación de stackoverflow.
El resto de los atributos son importantes y vienen por defecto en el componente de bootstrap modal para conocer más hacer clic aquí.
Las clases modal-dialog y modal-fullscreen hacen referencia a los estilos propios de la ventana modal y en este caso queremos que se muestre en pantalla completa.
Por último tenemos las clases modal-content, modal-header y modal-body que se explican por sí mismas.
Contenido del div modal-body
Acá es donde vamos a colocar todo el nuestro código que nos permitirá desplegar el carrusel de imágenes.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-label="Slide 6"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6" aria-label="Slide 7"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="7" aria-label="Slide 8"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="8" aria-label="Slide 9"></button>
</div>
<div class="carousel-inner" style="height:600px">
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/1.jpg" class="img-fluid d-block w-100" alt="...">
</div>
<div class="col-md-6">
<h3 class="text-start fs-2 mt-5"><span style="color:red">LA BANDA</span></h3>
<p class="card-text">
Las intervenciones de la banda son bloques dinámicos dirigidos a adultos jóvenes, somos una banda
de pop con la capacidad de fusionar diferentes estilos musicales, desde rock, pop, reggaetón y
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/2.jpeg" class="d-block w-100" alt="...">
</div>
<div class="col-md-6">
<h3 class="text-start fs-2 mt-5"><span style="color:red">LA BANDA</span></h3>
<p class="card-text">
Las intervenciones de la banda son bloques dinámicos dirigidos a adultos jóvenes, somos una banda
de pop con la capacidad de fusionar diferentes estilos musicales, desde rock, pop, reggaetón y
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/3.jpeg" class="d-block w-100" alt="...">
</div>
<div class="col-md-6">
<h3 class="text-start fs-2 mt-5"><span style="color:red">LA BANDA</span></h3>
<p class="card-text">
Las intervenciones de la banda son bloques dinámicos dirigidos a adultos jóvenes, somos una banda
de pop con la capacidad de fusionar diferentes estilos musicales, desde rock, pop, reggaetón y
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/4.jpeg" class="d-block w-100" alt="...">
</div>
<div class="col-md-6">
<h3 class="text-start fs-2 mt-5"><span style="color:red">LA BANDA</span></h3>
<p class="card-text">
Las intervenciones de la banda son bloques dinámicos dirigidos a adultos jóvenes, somos una banda
de pop con la capacidad de fusionar diferentes estilos musicales, desde rock, pop, reggaetón y
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/5.jpeg" class="d-block w-100" alt="...">
</div>
<div class="col-md-6">
<h3 class="text-start fs-2 mt-5"><span style="color:red">LA BANDA</span></h3>
<p class="card-text">
Las intervenciones de la banda son bloques dinámicos dirigidos a adultos jóvenes, somos una banda
de pop con la capacidad de fusionar diferentes estilos musicales, desde rock, pop, reggaetón y
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/6.jpg" class="d-block w-100" alt="...">
</div>
<div class="col-md-6">
<h3 class="text-start fs-2 mt-5"><span style="color:red">LA BANDA</span></h3>
<p class="card-text">
Las intervenciones de la banda son bloques dinámicos dirigidos a adultos jóvenes, somos una banda
de pop con la capacidad de fusionar diferentes estilos musicales, desde rock, pop, reggaetón y
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/7.jpg" class="d-block w-100" alt="...">
</div>
<div class="col-md-6">
<h3 class="text-start fs-2 mt-5"><span style="color:red">LA BANDA</span></h3>
<p class="card-text">
Las intervenciones de la banda son bloques dinámicos dirigidos a adultos jóvenes, somos una banda
de pop con la capacidad de fusionar diferentes estilos musicales, desde rock, pop, reggaetón y
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/8.jpeg" class="d-block w-100" alt="...">
</div>
<div class="col-md-6">
<h3 class="text-start fs-2 mt-5"><span style="color:red">LA BANDA</span></h3>
<p class="card-text">
Las intervenciones de la banda son bloques dinámicos dirigidos a adultos jóvenes, somos una banda
de pop con la capacidad de fusionar diferentes estilos musicales, desde rock, pop, reggaetón y
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/9.jpeg" class="d-block w-100" alt="...">
</div>
<div class="col-md-6">
<h3 class="text-start fs-2 mt-5"><span style="color:red">LA BANDA</span></h3>
<p class="card-text">
Las intervenciones de la banda son bloques dinámicos dirigidos a adultos jóvenes, somos una banda
de pop con la capacidad de fusionar diferentes estilos musicales, desde rock, pop, reggaetón y
</p>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
</body>
</html>Empezamos con el nivel más alto en la jerarquía de la estructura html que será la encargada de mostrar las imágenes en carrusel, después de pulsar alguna imagen en la cuadrícula.
El atributo más importante es, id=”carouselExampleIndicators” que nos permitirá identificar el carrusel que se va a controlar.
La clase carousel sirve para agregar estilos opcionales al carrusel. Y slide no existe como clase CSS; solo se usa como marcador para el script Bootstrap para alternar el comportamiento de deslizamiento.
El atributo data-bs-ride=”carousel” se usa para marcar un carrusel como animado a partir de la carga de la página. Si no usa data-bs-ride=”carousel” para inicializar el carrusel, debemos inicializarlo nosotros mismos. No se puede usar en combinación con la inicialización explícita de JavaScript (redundante e innecesaria) del mismo carrusel.
Indicadores de posición
El siguiente bloque de código se refiere a los indicadores de posición de cada imagen. La clase carousel-indicators agrega estilos a los indicadores de posición.
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-label="Slide 6"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6" aria-label="Slide 7"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="7" aria-label="Slide 8"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="8" aria-label="Slide 9"></button>
</div>Las siguientes etiquetas son de tipo button estos nos permitan controlar a través de los indicadores la posición de cada imagen en el carrusel.
El atributo data-bs-target=”#carouselExampleIndicators” nos permite identificar el carrusel que estamos trabajando.
El atributo data-bs-slide-to=”0″ se usa para pasar un índice de diapositiva sin procesar al carrusel data-bs-slide-to=”1″, que cambia la posición de la diapositiva a un índice particular que comienza con “0” cero.
La clase active, debe agregarse a una de las diapositivas; de lo contrario, el carrusel no será visible.
Los atributos aria-current=”true” se usa para el indicar el elemento actual en un conjunto y el atributo aria-label=”Slide 1″ se usa para fines de accesibilidad clic acá para conocer más este atributo.
Dentro del elemento carrusel
Finalmente, creamos el último bloque de código que nos permite mostrar las imágenes en el carrusel, dentro de una tarjeta junto con una descripción.
Las clases carousel-item junto con la clase active permite mostrar el elemento activo, es decir, el que está seleccionado. Hay que tener en cuenta que la clase carousel-item aparte que nos permite agregar estilos adicionales, nos permite controlar la posición de cada elemento en el carousel. La posición de cada elemento empieza en el índice 0 cero. Por este motivo esta clase es clave para que coincidan las imágenes de la cuadrícula con la de cada slide.
Por último, el resto de las clases nos permite mostrar los estilos que se escogieron para mostrar la imagen y la descripción que este caso está dentro de un contenedor div seguido de la clase row y divido en 2 columnas col-md-6
Código completo
Comparto el código completo en mi repositorio de GitHub.
Conclusión
En este breve tutorial pudimos ver cómo convertir una cuadrícula de imágenes que después de pulsar alguna de ella estas se muestren en un carrusel de pantalla completa, utilizando algunos componentes existentes de bootstrap.
Este tipo de soluciones son muy útiles en caso de que tengamos algún proyecto de fotografía o simplemente mostrar las imágenes al estilo de las aplicaciones de Android o iOS. Seguramente es más amplio el uso que se le puede dar a estos componentes, si piensas que se le puede dar otro tipo de usos, te invito que los escribas en los comentarios.