// CompleteRegistration // Track when a registration form is completed (ex. complete subscription, sign up for a service) fbq('track', 'CompleteRegistration');

Mit einer Lightbox in WordPress kannst du deine Fotos und Illustrationen ansprechend präsentieren und statt nur als Vorschaubild, gleichzeitig auch in einer größeren Darstellung anzeigen lassen.

Bilder und Grafiken spielen auf Websites und Blogs eine große Rolle. Leider sind die WordPress-Funktionen für eine schöne Darstellung von Fotos begrenzt.

Glücklicherweise können wir jedoch auf eine riesige Plugin-Sammlung zurückgreifen, worunter auch viele WordPress Lightbox Lösungen zu finden sind. Aber was ist eigentlich eine Lightbox und warum sollte diese verwendet werden?

Was ist eine Lightbox?

Die Kurzfassung:

Mit einer Lightbox werden Bilder nach dem Anklicken, ohne die Seite zu verlassen, vergrößert dargestellt, während der Hintergrund mit einem transparenten Overlay ausgegraut wird.

WordPress Ligthbox Beispiel

So könnte eine Lightbox aussehen. Im Hintergrund sieht man ausgegraut die Inhalte der Seite.

Nun die etwas ausführlichere Variante.

Wenn du ein Lightbox Plugin installiert hast, kannst du das gewünschte Bild auf deiner Webseite in einer verkleinerten Ausführung als Vorschaubild anzeigen lassen, und mit einem Klick in groß öffnen lassen. Es kann eine Bildunterschrift haben und sich beispielsweise mit einem Rahmen vom Text absetzen.

13 kostenlose Tipps, wie du beim Arbeiten mit WordPress Zeit sparst!

Schließe dich jetzt mehr als 1.000 Solopreneuren an, abonniere meinen Newsletter und spare täglich Zeit!

Klickst du das Vorschaubild nun an, öffnet sich ein Popup-Fenster. Das Fenster hat meist einen kleinen Rahmen und einen leicht durchsichtigen Hintergrund, sodass man dahinter noch die Webseite erkennen kann.

Dieses Popup mit dem ausgegrauten Hintergrund nennt sich „Lightbox“.

Sie stellt innerhalb des Rahmens nun das Bild entweder in einer voreingestellten Größe, oder der Größe des Bildes dar.

Je nach Einstellung kann es neben dem Bild in der Lightbox Pfeile nach links und rechts geben. Wenn du darauf klickst, erscheint das nächste Bild der Seite beziehungsweise des Artikels. Es kann also sowohl vorwärts als auch rückwärts durch die Fotogalerie geblättert werden.

Um die Lightbox zu schließen gibt es meistens ein Kreuz oben rechts oder man klickt einfach außerhalb des Rahmens auf die ausgegraute Seite.

Welches WordPress Lightbox Plugin soll ich nutzen?

Natürlich kannst du einfach auf der Plugin-Seite im Backend den Suchbegriff „Lightbox“ eingeben. Du wirst eine Menge Plugins vorgeschlagen bekommen.

In der Beschreibung findest du meist eine kleine Vorschau, was dieses Lightbox-Plugin leisten kann. Allerdings ist bei den WordPress Lightbox Plugins oftmals das Problem, dass sie sehr eingeschränkt sind oder schlicht und ergreifend nicht funktionieren.

WordPress Lightbox Plugin WP Lightbox 2 Einstellungen

Einstellungsmöglichkeiten von WP Lightbox 2

Eines der beliebtesten Plugins dieser Art ist zurzeit WP Lightbox 2 von Syed Balkhi, das ich selber hier auf dem Blog nutze. Leider ist es nur auf Englisch erhältlich, allerdings sind die Einstellungen sehr selbsterklärend und mit rudimentärem Englisch zu verstehen.

Eine einfache Version, die auch auf Deutsch verfügbar ist, wäre Simple Lightbox von Archetyped.

Achte bei der Auswahl deines Lightbox Plugins darauf, dass die Plugins mit der Bezeichnung „Lite“ meist einen eingeschränkten Funktionsumfang bieten. Diese Plugins können erst gegen eine Gebühr in vollem Umfang genutzt werden.

Wenn du dich für eine Lightbox entschieden und diese installiert hast, musst du sie für den ersten Gebrauch vorbereiten. Gehe deshalb nach der Installation in die Einstellungen des Plugins. Meistens findest du diese in einem neuen Menüpunkt im WordPress Menü.

Dort kannst du die Darstellungsweise der Lightbox nach deinen Wünschen anpassen. Auch die Bedienelemente für das Vor- und Zurückblättern durch die Fotogalerie kann in aller Regel eingestellt werden. Wenn du alle Einstellungen, vorgenommen hast, vergiss nicht auf den Speichern-Button zu klicken.

Nicht jedes Lightbox Plugin funktioniert mit jedem Theme. Wenn du eins installierst und es nicht funktioniert, lass dich nicht unterkriegen. Einfach wieder löschen und ein anderes ausprobieren!

Wie erfolgt die Darstellung auf der WordPress-Seite?

Das schöne an den Lightbox Plugins ist, dass sie in den meisten Fällen direkt nach der Installation automatisch bei einem Klick auf Bilder eine Lightbox öffnen.

WordPress Lightbox aktivieren mit "Link zur"

Wenn du ein Bild einfügst oder bearbeitest, stelle „Link zur“ auf „Medien-Datei“.

Die Lightbox Plugins machen das automatisch bei den Bildern, die als „Link zur“ die „Medien-Datei“ ausgewählt haben. Das kannst du nachträglich einstellen, wenn du im Editor über ein Bild fährst und auf das Stift-Icon klickst. Ansonsten vergibst du diese Einstellung direkt beim Einfügen eines Bildes.

 

Welches Lightbox Plugin nutzt du und welche Erfahrungen hast du mit diesen Plugins gemacht?

  • Guido

    Hallo Jonas,
    hat das Vorschaubild die gleichen Maße wie das große Bild? Dann sehe ich das Problem bei der Optimierung der Website. Dies wird oft von den Pagespeed Tools wie zum Beispiel GTMetrix (serve scaled images) oder Insights bemängelt. Idealerweise sollte von den Plugins ein skaliertes Vorschaubild erstellt werden, bzw. alternativ sollte man selber das Vorschaubild entsprechend anpassen und mit der Lightbox verknüpfen, wo dann das große Bild angezeigt wird.

    Wie siehst du das?

    • Jonas Tietgen

      Moin Guido,

      nein, natürlich nicht. Das Vorschaubild kannst du ja als „Vorschaubild“ oder beispielsweise auch in der Größe „Mittel“ einfügen. WordPress erstellt aus einem hochgeladenen Bild immer mehrere Versionen in verschiedenen Größen. Diese kannst du dann als Vorschaubild nutzen und beim Klick darauf öffnet sich die Lightbox mit dem Bild in Originalgröße.

      Grüße
      Jonas

  • Thomas

    Hallo Jonas,

    Sehr leichtgewichtig und damit mein Favorit ist WP Featherlight:
    https://de.wordpress.org/plugins/wp-featherlight/

    Das Plugin kommt ohne Einstellungen aus und funktioniert einfach direkt nach Aktivierung. Neben normalen Bildern werden auch WordPress Galerien inklusive Image Captions unterstützt.

    LG,
    Thomas

Sichere dir Newsletter & gratis eBook, wie du Zeit mit WordPress sparst

x