Cómo crear en JavaScript una galería de imágenes que se puedan arrastrar con GSAP

Spanish (Español) translation by Carlos (you can also view the original English article)

En un tutorial anterior, aprendimos a crear una galería de imágenes responsiva con slick.js. Hoy vamos a crear algo similar: una galería de imágenes responsiva con una imagen destacada/diapositiva principal que se puede arrastrar. Para hacer que el elemento objetivo se pueda arrastrar, aprovecharemos el plugin Draggable de GSAP.

¿Te parece un buen ejercicio?

Lo que crearemos

Esta es la galería que vamos a crear:

Please accept marketing cookies to load this content.

1. Incluye los plugins necesarios

Como ya se comentó, para hacer que las imágenes destacadas sean elementos que se puedan arrastrar, utilizaremos GSAP y específicamente su plugin Draggable.

Puedes lograr esta funcionalidad usando otro plugin o incluso con eventos de JavaScript puros

De manera opcional, también incluiremos InertiaPlugin (anteriormente ThrowPropsPlugin), un segundo plugin GSAP que aplicará un movimiento basado en el impulso después de que se suelte el mouse/touch. Cabe señalar que este es un plugin premium y tienes que registrarte para conseguir una membresía de GSAP antes de decidir usarlo. En nuestro caso, usaremos una versión de prueba que únicamente funciona de manera local y en dominios como codepen.io (mira la consola del navegador de la demostración para que obtengas más detalles).

Teniendo todo esto en cuenta, incluiremos tres archivos de JavaScript externos. Los dos primeros son obligatorios, mientras que el tercero es opcional.

2. Define el marcado HTML

Definiremos un elemento de envoltura que contendrá dos listas: la lista de las imágenes en miniatura y la lista de las imágenes destacadas. Ambas listas incluirán las mismas imágenes de Unsplash. Estas tendrán dimensiones iguales y serán lo suficientemente grandes como para implementar el efecto «arrastrable».

De manera predeterminada, aparecerá la primera diapositiva principal. Pero podemos configurar ese comportamiento añadiendo la clase is-active a la diapositiva deseada (listas).

Asimismo, todas las imágenes destacadas conservarán sus dimensiones originales (1920 x 1280px).

Esta es la estructura que se requiere para nuestra página de demostración:

<div class="gallery-wrapper">
  <ul class="thumb-list">
    <li class="is-active">
      <img width="1920" height="1280" src="sports-car1.jpg" alt="">
    </li>
    <li>
      <img width="1920" height="1280" src="sports-car2.jpg" alt="">
    </li>
    <li>
      <img width="1920" height="1280" src="sports-car3.jpg" alt="">
    </li>
    <li>
      <img width="1920" height="1280" src="sports-car4.jpg" alt="">
    </li>
  </ul>
  <ul class="featured-list">
    <li class="is-active">
      <div class="featured-img" style="background-image: url(sports-car1.jpg); width: 1920px; height: 1280px;"></div>
    </li>
    <li>
      <div class="featured-img" style="background-image: url(sports-car2.jpg); width: 1920px; height: 1280px;"></div>
    </li>
    <li>
      <div class="featured-img" style="background-image: url(sports-car3.jpg); width: 1920px; height: 1280px;"></div>
    </li>
    <li>
      <div class="featured-img" style="background-image: url(sports-car4.jpg); width: 1920px; height: 1280px;"></div>
    </li>
  </ul>
</div>

3. Especifica los estilos principales

Con el marcado preparado, continuaremos con los estilos principales de nuestra galería. Para simplificar, omitiré los estilos de introducción/reinicio. También no optimizaré ni fusionaré los estilos CSS comunes, por lo que te resultará más fácil entender lo que está sucediendo. Asegúrate de verlos todos haciendo clic en la pestaña CSS de la demostración.

Establece el diseño de la galería

La galería tendrá un ancho máximo de 950px.

En pantallas grandes (>750 px), tendremos dos columnas. Las miniaturas aparecerán en el lado izquierdo, mientras que las imágenes destacadas estarán en el derecho, de esta forma:

Observa que las miniaturas cubrirán una cuarta parte del ancho de la galería, mientras que las imágenes destacadas cubrirán tres cuartas partes.

En pantallas pequeñas (≤750px), las miniaturas estarán situadas debajo de la imagen destacada, así:

Observa que cada miniatura cubrirá un cuarto del ancho del elemento parent.

Estos son los estilos asociados:

.gallery-wrapper {
  max-width: 950px;
  padding: 0 15px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 15px;
}

.gallery-wrapper .thumb-list {
  display: grid;
  grid-gap: 15px;
}

@media (max-width: 750px) {
  .gallery-wrapper {
    grid-template-columns: 1fr;
  }

  .gallery-wrapper .thumb-list {
    grid-template-columns: repeat(4, 1fr);
    order: 1;
  }
}

Visibilidad de diapositivas destacadas

Por defecto, todas las diapositivas destacadas estarán ocultas, excepto la diapositiva activa. Además, solamente aparecerá una diapositiva destacada (la activa) a la vez.

Estos son los estilos asociados:

.gallery-wrapper .featured-list li {
  opacity: 0;
  transition: opacity 0.25s;
}

.gallery-wrapper .featured-list li.is-active {
  opacity: 1;
}

Posición de las imágenes destacadas

En pantallas grandes, las dos columnas de la galería tendrán la misma altura que los elementos de la cuadrícula. No obstante, las imágenes destacadas serán elementos posicionados de manera absoluta y centrados dentro de su contenedor. Para ver todas sus partes tenemos que arrastrarlas.

En pantallas pequeñas, ya que las columnas están apiladas y las imágenes destacadas todavía están posicionadas de manera absoluta, debemos especificar una altura fija para la columna de la derecha.

Estos son los estilos asociados:

.gallery-wrapper .featured-list {
  position: relative;
  overflow: hidden;
}

.gallery-wrapper .featured-list .featured-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 750px) {
  .gallery-wrapper .featured-list {
    height: 340px;
  }
}

Indica el estado active y hover

Cada vez que pasemos el puntero del mouse sobre una miniatura, aparecerá su pseudoelemento ::before. Este tendrá un fondo azul claro y se colocará en la parte superior de la miniatura.

Por otra parte, la miniatura activa recibirá un borde de color rojo.

Estos son los estilos asociados:

/*CUSTOM VARIABLES HERE*/

.gallery-wrapper .thumb-list li {
  position: relative;
  cursor: pointer;
  border: 4px solid var(--black);
}

.gallery-wrapper .thumb-list li:not(.is-active):hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--hovered-thumb);
}

.gallery-wrapper .thumb-list li.is-active {
  border-color: var(--red);
}

4. Añade el código JavaScript

¡Ahora vamos a darle vida a nuestra galería!

Cambiar las diapositivas

Cada vez que hagamos clic en una miniatura, realizaremos las siguientes acciones:

Eliminaremos la clase is-active de la miniatura activa preexistente y de la imagen destacada.
Buscaremos el índice de la miniatura activa actual.
Asignaremos la clase is-active a la miniatura activa y a la imagen destacada cuyo índice coincide con el índice de esta miniatura.

Este es el código que se requiere:

const thumbList = document.querySelector(".thumb-list");
const thumbItems = thumbList.querySelectorAll("li");
const featuredList = document.querySelector(".featured-list");
const isActiveClass = "is-active";

thumbItems.forEach(function (el) {
  el.addEventListener("click", function () {
    thumbList.querySelector("li.is-active").classList.remove(isActiveClass);
    featuredList.querySelector("li.is-active").classList.remove(isActiveClass);
    let index = Array.from(thumbItems).indexOf(el);
    el.classList.add(isActiveClass);
    featuredList
      .querySelector(`li:nth-child(${++index})`)
      .classList.add(isActiveClass);
  });
});

Añade soporte del teclado

Ahora mejoremos la experiencia del usuario brindando soporte para la navegación mediante el teclado. De manera más específica:

Cada vez que se presionen las teclas flecha arriba (↑) o flecha abajo (↓), recuperaremos la miniatura activa preexistente.
Si se presiona la tecla flecha arriba, la miniatura que viene antes de la miniatura actual se activará. En caso de que no exista tal miniatura, la última miniatura se activará.
Si se presiona la tecla flecha abajo, la miniatura que viene después de la miniatura actual se activará. En caso de que no exista tal miniatura, la primera miniatura se activará.

Este es el código que se necesita

...

document.addEventListener("keyup", (e) => {
  if (e.keyCode === 38 || e.keyCode === 40) {
    const activeThumb = thumbList.querySelector("li.is-active");
    // up arrow
    if (e.keyCode === 38) {
      if (activeThumb.previousElementSibling) {
        activeThumb.previousElementSibling.click();
      } else {
        thumbList.lastElementChild.click();
      }
    } else {
      // down arrow
      if (activeThumb.nextElementSibling) {
        activeThumb.nextElementSibling.click();
      } else {
        thumbList.firstElementChild.click();
      }
    }
  }
});

Como mejora, puedes cambiar las flechas arriba/abajo por las de izquierda/derecha en el diseño para dispositivos móviles.

Haz que las imágenes destacadas se puedan arrastrar

En este último paso, haremos que las imágenes destacadas sean elementos que se puedan arrastrar. Para hacer esto, utilizaremos el método create () que recibirá los dos siguientes argumentos:

Los elementos que queremos arrastrar.
Un objeto de configuración. Dentro de él, especificaremos los límites en los que los elementos arrastrables deben permanecer durante el efecto. De manera opcional, como hemos cargado InertiaPlugin, también solicitaremos el movimiento basado en el impulso de la propiedad inertia después de que los usuarios suelten el mouse/touch.

Este es el código correspondiente:

const featuredList = document.querySelector(".featured-list");
const featuredImgs = featuredList.querySelectorAll(".featured-img");

Draggable.create(featuredImgs, {
  bounds: featuredList,
  inertia: true
});

Por supuesto, aquí tratamos únicamente la parte básica de la funcionalidad del plugin. Puedes profundizar aún más leyendo los documentos e implementando cosas complejas.

Conclusión

¡Otro ejercicio ha llegado a su fin, amigos! Gracias por seguirlo. Esperemos que hayan disfrutado de lo que creamos hoy y que les haya brindado un conocimiento sólido sobre cómo combinar código personalizado con el poder de plugins populares como GSAP.

Aquí tienes un recordatorio de lo que hemos creado:

Please accept marketing cookies to load this content.

Por último, aunque no menos importante, recuerda que GSAP no es la única manera de crear un efecto «arrastrable». Te invitamos a que pruebes otra opción y que la compartas con nosotros.

Además, si deseas practicar con esta demostración, tengo un reto para ti: crea un efecto lighbox personalizado que se abra cada vez que hagas clic en el botón correspondiente. Mira el botón de llamada a la acción a continuación:

Si aceptas el reto, puedes usar el modal que creamos hace algún tiempo como punto de partida. En un próximo tutorial, ofreceré una posible solución. ¡Mantente atento!

Como siempre, ¡muchas gracias por leer!