Masonry Galerie erstellen

Table of contents

Vorbereitung

Für das Javascript werden die Dateien “photoswipe.esm.js”, “photoswipe-lightbox.esm.js” und “photoswipe.css” genötigt. Diese können im Git Repository unter “dist” heruntergeladen werden. Die Dateien wurden in Jekyll unter /assets/js/photoswipe/ abgelegt.

Der Getting Started Guide ist eine gute Anleitung um eine basic Lightbox zu erstellen. Dort ist der nötige JS und HTML als Beispiel hinterlegt.

Javascript und CSS in das HTML einbetten

Der Javascript Code kann direkt in das HTML oder als weitere JS-Datei integriert werden. Ich bette den Code direkt in das HTML ein. Falls Ihr andere Pfade für das JS verwendet, müssen diese hier entsprechend angepasst werden. Es können auch mehrere Galerien mit unterschiedlichen Animationen integiert werden. Der JS Code kann dann mehrfach mit den gewählten Optionen in die default.html eingefügt werden. Photoswipe unterstützt div. Optionen und Animationen. Hier sollte unbedient die Dokumentation gelesen werden. Ich habe mich für “zoom” entschieden. Die neue Galerie nennen wir wie im Beispiel auch gallery--getting-startet und wird später im HTML mit id=gallery--getting-startet angesprochen.

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

<script type="module">
    // Include Lightbox 
    import PhotoSwipeLightbox from '/assets/js/photoswipe/photoswipe-lightbox.esm.js';

    const lightbox = new PhotoSwipeLightbox({
      // may select multiple "galleries"
      gallery: '#gallery--getting-started',

      // Elements within gallery (slides)
      children: 'a',
      showHideAnimationType: 'zoom',

      // setup PhotoSwipe Core dynamic import
      pswpModule: () => import('/assets/js/photoswipe/phothoswipe.esm.js')
    });
    lightbox.init();
</script>

Alternative:

<script type="module">
import PhotoSwipeLightbox from '/assets/js/photoswipe/photoswipe-lightbox.esm.js';

const backEasing = {
  in: 'cubic-bezier(0.6, -0.28, 0.7, 1)',
  out: 'cubic-bezier(0.3, 0, 0.32, 1.275)',
  inOut: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
};

const lightbox = new PhotoSwipeLightbox({
  gallery:'#gallery--getting-startet',
  children:'a',

  showHideAnimationType: 'zoom',
  showAnimationDuration: 1000,
  hideAnimationDuration: 1000,

  pswpModule: () => import('/assets/js/photoswipe/photoswipe.esm.js')
});
lightbox.on('firstUpdate', () => {
  lightbox.pswp.options.easing = backEasing.out;
});
lightbox.on('initialZoomInEnd', () => {
  lightbox.pswp.options.easing = backEasing.inOut;
});
lightbox.on('close', () => {
  lightbox.pswp.options.easing = backEasing.in;
});
lightbox.init();
  </script>

CSS für die Galerie

Mit den bisherigen Schritten ist es schon möglich die Bilder in der Lightbox aufzurufen. Damit diese auch im Blogpost Optisch schön angeordnet sind, werden ich eine Art “masonry” Anordnung verwenden. Infos zum CSS Code gibt es auf CSS-Tricks. Das “richtige” masonry Layout ist wohl nur in experimentellen Firefox Versionen verfügbar, bei der Anordnung handelt es sich um eine “fake” Anordnung. Sieht aber trotzdem schön aus.

.pswp-gallery--single-column {
  columns: 6 200px;
  column-gap: 1rem;
  div {
    width: 150px;
    background: #EC985A;
    color: rgb(248, 0, 0);
    margin: 0 1rem 1rem 0;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: system-ui;
    font-weight: 900;
    font-size: 2rem;
  } 
  @for $i from 1 through 36 { 
    div:nth-child(#{$i}) {
      $h: (random(400) + 100) + px;
      height: $h;
      line-height: $h;
    }
  }
}

Im Post eine Galerie erstellen

Wenn das CSS und Javascript heruntergeladen, erstellt und integriert wurde, kann eine Galerie mit HTML erstellt werden. Dazu wird der HTML-Code einfach per Copy&Paste in eine Markdowndatei eingefügt. Jekyll sorgt für den Rest.

Wichtig: für eine passende Skalierung der Bilder muss data-pswp-width und data-pswp-height passend für das jeweilige Bild angegeben werden. Hier muss zwingend die Auflösung des Bildes hinterlegt werden!

<div class="pswp-gallery pswp-gallery--single-column" id="gallery--getting-started">
  <a href="/assets/img/boot.webp" 
    data-pswp-width="1000" 
    data-pswp-height="667" 
    target="_blank">
    <img src="/assets/img/boot.webp" alt="" />
  </a>
</div>

Der Abschnitt <a></a> kann beliebig erweitert werden, um weitere Bilder einzufügen.

Ergebnis