baguetteBox.js ist eine einfache und kleine (3,2 KB gzipped) Lightbox ohne jQuery. Was mir daran besonders gut gefällt, sie kann ganz einfach implementiert werden, ohne dabei die HTML-Links zu den Fotos modifizieren zu müssen. Ideal für meine Zwecke.
Ich hatte neulich ein Bilderarchiv mit WordPress Custom Post Types für den Blog erstellt. Über eine simple Abfrage checke ich, ob eine Einzelseite ein Bilder-Beitrag ist und platziere dann zusätzlich baguetteBox.js im Footer der Website. Das geht zum Beispiel wie folgt:
<?php if(is_singular('img')) { ?>
<link rel="stylesheet" href="pfad/baguetteBox.min.css">
<script src="pfad/baguetteBox.min.js" async></script>
<script> window.onload = function() { baguetteBox.run('.entry-content'); };</script>
<?php } ?> Wer CSS und JS nicht selbst hosten möchte, bindet die Dateien einfach per CDN ein. Ich habe das komprimierte CSS und JS allerdings direkt in den Footer kopiert.
Der Aufruf von baguetteBox.js muss dann je nach Theme erfolgen. In meinem Fall befindet sich der eigentliche Inhalt der Seite in einem DIV namens .entry-content. Diesen Teil im Code passt ihr einfach auf die Klasse des DIV eures Themes an.
baguetteBox.js kann mit weiteren Optionen konfiguriert werden, läuft aber von Haus aus bereits zufriedenstellend und flott. Auf Smartphones kann man einfach durch die Bilder wischen und auch das Zoomen ist möglich.
Wie das Ganze in Aktion ausschaut, könnt ihr euch hier anschauen.
