Masonry Galerie erstellen

Um eine neue Galerie mit einer Lightbox-Funktion nutzen zu können, muss ein entsprechender Javascript und CSS Code eingebunden werden. Das Javascript und die CSS Datei sollten im Footer integriert werden. Bei Jekyll kann die “default.html” Datei dafür genutzt werden, um den Code einzubetten.

Als Lightbox habe ich mich für Photoswipe entschieden, es gibt als Alternative noch nanogallery2 und lightGallery. LightGallery ist allerdings kostenpflichtig, kostet ab 25€, daher die Entscheidung zu Photoswipe.

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.

Auszug aus der default.html

<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.

<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¶