Das einfachste WordPress Lightbox Plugin für deine Bilder

Mit einem WordPress Lightbox Plugin kannst du Bilder und Videos in deiner WordPress Website besser darstellen und mit einem Popup in größerer Auflösung präsentieren. Mein persönlicher Favorit und von mir gerne empfohlenes Plugin dafür ist WP Featherlight.

Warum du eine WordPress Lightbox nutzen solltest

Unter einer Lightbox versteht man ein JavaScript-Feature, mit dem einzelne Bilder und Videos besser präsentiert werden können. Typischerweise wird das Bild in einem Popup-Fenster angezeigt, welches den ganzen Screen ausfüllt und den Rest der Seite abdunkelt.

Die Lightbox öffnet sich üblicherweise nach einem Klick auf das Bild. Das Bild wird dann in voller Größe dargestellt und damit ansprechender präsentiert. Vor allem wenn du viele Fotos und Illustrationen auf deiner Website zeigst, würde ich zum Einsatz einer Lightbox raten.

Es existieren wahrscheinlich mehrere Dutzend verschiedener WordPress Lightbox Plugins, die sich oft nur geringfügig unterscheiden. Eine Auswahl fällt deshalb schwer.

Das einfachste Lightbox Plugin für WordPress und damit mein Favorit ist WP Featherlight.

WP Featherlight

Ich selbst setze das Plugin auf fast allen meinen Websites ein. Insgesamt ist es derzeit über 40.000 Mal installiert und durchgängig gut bewertet.

WP Featherlight basiert auf der Featherlight jQuery Lightbox.

Dabei handelt es sich um ein sehr leichtgewichtiges und simples Skript, welches mit wenigen Code-Zeilen auskommt, nur 6 Kilobyte groß und damit im Vergleich zu anderen Schwergewichten sehr performant ist.

WP Featherlight ist ein WordPress Plugin ohne Einstellungen und eigentlich nur ein Wrapper für das Skript. Nach der Aktivierung fügt es automatisch zu allen Bildern und Galerien eine responsive und minimalistische WordPress Lightbox hinzu.

Es funktioniert einfach und ohne viel Konfiguration.

Bilder in WordPress Lightbox präsentieren

Eingefügte Bilder im Visuellen Editor werden automatisch nach einem Klick auf das Bild in einer Lightbox dargestellt, wenn das Bild zur Medien-Datei verlinkt. Dazu kannst du beim Einfügen des Bilds das Auswahlfeld Link zur entsprechend konfigurieren.

Als Ergebnis lässt sich das Bild im Beitrag nun in einer Lightbox größer darstellen:

Alternativ kannst du auch eine individuelle URL eingeben, die direkt auf eine Bild-Datei verweist. Damit können sogar externe Bilder in der Lightbox dargestellt werden, die nicht auf dem eigenen Server liegen.

WordPress Galerie mit Lightbox verwenden

Mit WP Featherlight können auch die Bilder in WordPress Galerien in einer Lightbox dargestellt werden. Auch hier müssen die Bilder einfach nur zur Medien-Datei verlinkt sein, den Rest erledigt das Plugin automatisch.

Das Ergebnis:

Ja, ich mag Katzen 😉

Weitere Möglichkeiten für Entwickler

In der Dokumentation des Feathlight jQuery Plugins findest du noch weitere Möglichkeiten, wie du das Lightbox-Skript nutzen kannst.

Grundsätzlich wird die Lightbox für alle Elemente aktiviert, welche das Attribut data-featherlight nutzen. Der Wert dieses Attributs wird als Selektor für das Element verwendet, welches in der Lightbox dargestellt werden soll.

Damit können auch beliebige andere Inhalte in der Lightbox präsentiert werden:

<a href="#" data-featherlight="#mylightbox">Open element in lightbox</a>
<div id="mylightbox">This div will be opened in a lightbox</div>

Das Plugin zeigt standardmäßig die Beschriftung von Bildern (Image Captions) auch in der Lightbox. Dieses Feature kann mit etwas Code deaktiviert werden, indem der Filter  wp_featherlight_captions auf false gesetzt wird.