Wer Bilder auf seiner Website nutzt, kommt schnell an den Punkt, wo diese auch mal größer dargestellt werden möchten. Hier kommt die sog. Lightbox (oder auch Modal-Box bei anderen Inhalten) zum Einsatz. Diese Lightbox stellt deine Bilder innerhalb einer Galerie mit einem klick darauf deutlich größer dar und blendet meist auch den Hintergrund etwas ab, damit der Fokus auf das Bild gerichtet ist.
Mit dem Plugin Lightbox for Gallery & Image Block wird wirklich nur die Funktion in dein WordPress eingefügt.
Es gibt natürlich bereits diverse Erweiterungen im Plugin-Verzeichnis von WordPress oder dein bisheriges Setup brachte diese bereits mit einem Theme oder Plugin mit. Doch welches ist am „besten“ für welchen Zweck und achtet dabei auch auf die Ladezeit deiner Website?
Wir versuchen dir unsere Entscheidungen und Ableitungen mitzugeben, damit du dir das sparen kannst. Warum der Aufwand, fragst du dich? Nun, viele dieser vermeintlichen Lösungen können schnell überladen wirken oder unnötige Extras mit sich bringen, die gegen eine schlanke Lösung sprechen. Sobald dann unnötige Upsells nur für den Lightbox Zweck als Pro-Version angeboten werden, wird es fraglich (für den kleinen Anwendungsfall). Wir wollen also versuchen eine leichtgewichtige Lösung zu finden und schlagen uns durch die breite Palette der Open-Source-Angebote, mit nachhaltigem Gedanken und ohne Marketing-Tricks, damit du das nicht tun musst. 🙂
Wie du eine einfache und schlanke Lighbox für deine Bilder bekommst, erfährst du hier.
Wir werden das Plugin „Lightbox for Gallery & Image Block“ nutzen.
Es ist sehr leichtgewichtig (13 KB / 7 KB komprimiert) aufgebaut und verzichtet komplett auf die Nutzung von jQuery.
Das Plugin erweitert die Standard-Galerie und Bildblöcke um eine schlanke, moderne Lightbox-Funktion, ganz ohne zusätzliche Abhängigkeiten. Es erkennt automatisch, ob ein Beitrag eine Galerie oder ein Bild enthält, und lädt dann baguetteBox.js, ein reines JavaScript-Lightbox-Skript mit minimalistischem Design.
Besonders praktisch: Es ist vollständig rückwärtskompatibel. Das Plugin ersetzt keine Blöcke und integriert sich nahtlos in den bestehenden Editor. Wird es deaktiviert, funktionieren alle Bilder und Galerien weiterhin wie gewohnt, lediglich die Lightbox-Funktion entfällt.
Wichtig: Damit die Lightbox funktioniert, müssen Bilder und Galerien auf die Mediendatei verlinkt werden. Wird „Keine“ oder „Anhang-Seite“ als Linkziel gewählt, wird keine Lightbox aktiviert – was allerdings nützlich sein kann, wenn man gezielt auf die Funktion verzichten möchte.
Merkmale
- Reines JavaScript, kein jQuery oder andere Abhängigkeiten
- Unterstützung für Bildunterschriften
- Responsive Darstellung
- Touch-/Swipe-Gesten werden unterstützt
- Sehr schlank: ca. 13 KB (7 KB komprimiert)
- Minimalistisches, modernes Erscheinungsbild
Kompatibilität
Das Plugin funktioniert mit folgenden Blöcken und Galerie-Plugins:
- Standard Galerie-Block
- Standard Bild-Block
- Medien- und Text-Block
- Galerie im klassischen Editor
- GenerateBlocks Bild-Element (mit aktivierter dynamischer Verlinkung zur Einzeldatei)
- Meow Gallery (inkl. Block-Version)
- CoBlocks Galerie-Layouts (Collage, Masonry, Versetzt, Gestapelt)
Installation
Die Installation erfolgt wie gewohnt über das WordPress-Plugin-Verzeichnis oder per Upload. Nach der Aktivierung erkennt das Plugin automatisch die passenden Inhalte und übernimmt die Lightbox-Funktion – vorausgesetzt, die Verlinkung der Bilder ist korrekt gesetzt.