PhotoSwipe - galerías

24-11-2022
Tempo de lectura: 2 minutos

Una librería en JavaScript para mostrar galerías e imágenes con el efecto lightbox.


	Contenido Consideraciones Instalación HTML JavaScript Ejecución Referencias

Consideraciones	Los desarrolladores de PhotoSwipe remarcan los siguientes puntos para un correcto funcionamiento: - Requiere que las imagen estén predefinidas con sus dimensiones, se debe definir el ancho y la altura de cada imagen. - No está diseñado para mostrar imágenes muy grandes. El tamaño máximo recomendado es 3000 x 3000 px. - Está diseñado pensando en la mejora progresiva y solo funciona en navegadores modernos, es decir, tenemos que proporcionar una manera alternativa de ver la imagen para los navegadores menos actualizados.
Instalación	Primero tenemos que obtener el código que podemos encontrar en GitHub. Descargamos de la carpeta `dist/` los archivos en formato universal, UMD.
	`<script src="./photoswipe.umd.min.js"></script> <script src="./photoswipe-lightbox.umd.min.js"></script>`
	También descargamos los estilos CSS y tendremos el código preparado para usar
	`<link rel="stylesheet" href="./photoswipe.css">`
HTML	Creamos los contenedores de la galería y utillizamos como elementos de imagen
	`<div class="test-gallery"> <a href="../astro/images/1e0657_full.jpg" data-pswp-width="1920" data-pswp-height="1388"> <img src="../astro/images/1e0657_full.jpg" alt="" /> </a> <a href="../astro/images/1e0657_opt.jpg" data-pswp-width="720" data-pswp-height="520"> <img src="../astro/images/1e0657_opt.jpg" alt="" /> </a> </div>`
JavaScript	Ahora preparamos el código JavaScript que ejecutará la galería, indicamos la clase para identificar el contenedor padre y los elementos que usamos como hijos
	`<script type="text/javascript"> var lightbox = new PhotoSwipeLightbox({ gallery: '.test-gallery', children: 'a', pswpModule: PhotoSwipe }); lightbox.init(); </script>`
Ejecución	Nos mostrará la galería con las dos imágenes preparadas de esta manera.
		Ejemplo de galería Ampliación

	Y si hacemos clic en una de ellas, se abrirá con las dimensiones del viewport actual y podremos hacer zoom hasta el tamaño definido o navegar a la siguiente imagen
		Efecto lightbox y navegación por las imágenes Ampliación

Referencias	Documentación y web https://photoswipe.com
	GitHub https://github.com
	En cdnjs https://cdnjs.com