PhotoSwipe - galerías
Tiempo de lectura: 1 minutos
Una librería en JavaScript para mostrar galerías e imágenes con el efecto lightbox.
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 con este link
<link rel="stylesheet" href="./photoswipe.css"> HTML
Creamos los contenedores de la galería y utillizamos <a> 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.
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
- Documentación y web
https://photoswipe.com - GitHub
https://github.com - En cdnjs
https://cdnjs.com
