BaguetteBox.js - Galerie Script
Artikel vom 29 März 2026
Endlich geschafft: Eine Lightbox Galerie in die Webseite integrieren
Die Baguettebox Galerie , geschrieben in reinem javascript , ist wirklich leicht in Jekyll zu integrieren! lediglich die beiden Dateien aus dem dist Verzeichnis des reposority per Script Tag ins Dokument laden
<link rel="stylesheet" href="css/baguetteBox.min.css">
<script src="js/baguetteBox.min.js" async></script>
und am Ende des Dokuments nochmal per Event handler starten.
<script>
window.addEventListener('load', function() {
baguetteBox.run('.gallery');
});
</script>
Auf der Projekt seite ist das leicht verständlich dokumentiert in der Readme.md .
Hier in Jekyll hab ich dann eben im header aller seiten, abhängig von ner Frontmatter Variable die anzeigt ob die entsprechende Seite ne Galerie enthält,
die Scripte geladen.
Im footer, ebenfalls abhängig von der FrontMatter Variable im Post, den Eventhandler per script Tag eingebunden. Der Eventhandler sollte erst aufgerufen werden wenn das Dokument ziemlich fertig in den Browser geladen ist.
In den Artikel’n Meeries Zuause und Vogesen seht ihr die Galerie im Einsatz.Einfach einen Container um alle Bilder die in groß angezeigt werden sollen definieren und im baguetteBox.run den Namen des Containers uebergeben. (im obigen Beispiel: gallery ) und den Link auf die großen Bilder setzen.
Vorher hatte ich mal Photswipe probiert , das aber verworfen da dort mit Javascript Modulen gearbeitet wird und ich mich in das Thema noch nicht reingefuchst hab. desweiteren braucht Photoswipe die genauen Bild abmessungen (width, height) was die Sache beim erstellen von Beiträgen doch erschwert find ich.
