Come usare la libreria JavaScript PhotoSwipe senza i moduli ESM

In questo articolo vedremo come usare la libreria PhotoSwipe senza l'impiego dei moduli ESM. Si tratta di una soluzione che rende questa libreria compatibile con la maggior parte degli ambienti web.

La struttura HTML di base prevede l'inclusione delle risorse della libreria prima della definizione della galleria did immagini nel sorgente.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/photoswipe.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/umd/photoswipe.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/umd/photoswipe-lightbox.umd.min.js"></script>

<!-- Codice galleria -->
<div class="my-gallery"></div>

<script src="my-gallery.js"></script>

Si noti come qui stiamo utilizzando la versione UMD della libreria in modo da non essere costretti ad usare i moduli ESM. Nel codice HTML della galleria, è fondamentale che i link HTML abbiano gli attributi di dati data-pswp-width e data-pswp-height in cui andremo a specificare la larghezza e l'altezza originale delle immagini (in pixel). Ad esempio:

<figure class="gallery-item">
    <a href="https://example.com/test.jpg" data-pswp-width="1024" data-pswp-height="768">
        <img src="https://example.com/test.jpg" alt="Test">
    </a>
</figure>

Il codice JavaScript di inizializzazione in questo caso andrà a specificare la dipendenza PhotoSwipe' nell'opzione di configurazionepswpModule`.

// my-gallery.js
(function () {
  function initGallery() {
    const galleryElement = document.querySelector('.my-gallery');
    if (!galleryElement) {
      return;
    }
    if (!PhotoSwipeLightbox && !PhotoSwipe) {
      return;
    }
    const lightbox = new PhotoSwipeLightbox({
      gallery: '.my-gallery',
      children: 'a',
      pswpModule: PhotoSwipe
    });
    lightbox.init();
  }

  document.addEventListener('DOMContentLoaded', () => {
    initGallery();
  });
})();

Ricordiamo che gli attributi di dati impostati in precedenza sugli elementi a servono a PhotoSwipe per il corretto ridimensionamento delle immagini.

Conclusione

PhotoSwipe può essere usata anche senza far ricorso ai moduli ESM. Si tratta di una soluzione che garantisce la compatibilità di questa libreria con la maggior parte delle installazioni e degli ambienti web.

Torna su