PhotoSwipe

Qué es

PhotoSwipe es una librería JavaScript de código abierto para mostrar imágenes en un lightbox (visor a pantalla completa) y galerías, optimizada tanto para móvil como para escritorio. La desarrolla Dmytro Semenov y está escrita en JavaScript puro sin depender de jQuery, React ni ningún otro framework. Se distribuye como módulos ES6 bajo licencia MIT.

Para qué sirve

• Abrir imágenes a pantalla completa al hacer clic en sus miniaturas, con animación de apertura.
• Navegar por una galería con gestos táctiles: deslizar, pellizcar para hacer zoom y arrastrar para cerrar.
• Cargar imágenes de forma responsive mediante srcset y abrirlas en un estado de zoom predefinido.
• Extender el visor con plugins (subtítulos dinámicos, zoom profundo en mosaico, etc.).

Cuándo usarlo

Es buena opción cuando necesitas un visor de imágenes ligero y con buena experiencia táctil sin atarte a un framework concreto. Encaja en sitios estáticos, blogs, portfolios o tiendas. Si trabajas con React o Vue puedes usar wrappers de la comunidad o integrarlo manualmente. Como alternativas existen GLightbox, Fancybox o lightGallery; PhotoSwipe destaca por su rendimiento en móvil y por no tener dependencias.

Ejemplo

Instalación y uso básico con un módulo ES6:

npm install photoswipe

<link rel="stylesheet" href="photoswipe/dist/photoswipe.css" />

<div id="my-gallery">
  <a href="grande.jpg" data-pswp-width="1669" data-pswp-height="2500">
    <img src="miniatura.jpg" alt="" />
  </a>
</div>

import PhotoSwipeLightbox from 'photoswipe/lightbox';
import 'photoswipe/style.css';

const lightbox = new PhotoSwipeLightbox({
  gallery: '#my-gallery',
  children: 'a',
  pswpModule: () => import('photoswipe'),
});

lightbox.init();

Puntos clave

• JavaScript puro y sin dependencias de frameworks.
• Diseñado para móvil: gestos táctiles, zoom por pellizco y cierre por arrastre.
• Un único archivo CSS basado en variables que genera los iconos dinámicamente.
• Sistema de plugins y API para personalizar el comportamiento del visor.

Ten en cuenta

Cada enlace de imagen debe declarar de antemano sus dimensiones con los atributos data-pswp-width y data-pswp-height; si no las conoces, hay que calcularlas. Requiere navegadores modernos con soporte de módulos ES6, con degradación al enlace original en los que no lo soportan. La versión estable es la 5; el autor está desarrollando PhotoSwipe v6, así que conviene seguir las notas de versión antes de migrar.