Wir haben natürlich nicht für alles eine Lösung. Aber an Problemen, über welche wir selber schon gestolpert sind, müssen sich andere ja nicht auch noch die Zähne ausbeissen.

Divi ist das Haupt-Theme von Elegant Themes. Mit diesem sehr flexiblen und anpassungsfähigen WordPress Theme lassen sich fast alle Arten von Webseiten erstellen. Divi verfügt (zum Beispiel im Bild-Modul) über eine schöne Lightbox, in der sich die Bilder beim Klicken vergrößert öffnen. Manchmal möchte man aber kein Bild, auf das man klicken kann, sondern man möchte ein Bild über einen normalen Textlink in einer Lightbox öffnen.

Öffnen eines Lightbox-Bildes über einen Textlink

Als Lightbox bezeichnet man die Art der Vergrößerung eines Bildes, wenn sich der gesamte Bildschirm abdunkelt (manchmal mit einer leichten Transparenz, sodass man den Hintergrund noch leicht sieht) und das Bild in einer großen Detailansicht zeigt. Eine solche Lightbox wird meist durch einen Klick auf ein kleineres Vorschaubild ausgelöst. Man kann diese Lightbox-Funktion aber auch auslösen, in dem man einem normalen HTML-Link die entsprechende Klasse hinzufügt. Als Link-Pfad verwendet man dann einfach den Pfad des gewünschten Bildes.

Hier ein Beispiel, wie ein solcher Link aussieht und funktioniert: Hier klicken, um Lightbox-Bild zu öffnen

Um einen solchen Hyperlink mit Lightboxfunktion zu erstellen, verwendet man am besten die HTML Ansicht des Editors, damit man auch den gesamten HTML Code bearbeiten kann. Den Link-Pfad (sprich dem href-Attribut des Links) setzt man auf den gewünschten Bildpfad, und als Klasse des Links setzt man „et_pb_lightbox_image“. Ein solcher Link würde dann beispielsweise folgendermaßen aussehen:

Der kleine Extra-Trick, damit sich die Lightbox nicht nur einmal öffnet

Eine grundsätzliche Eigenart dieser Methode ist, dass sich damit die Lightbox leider nur einmal aufrufen lässt. Sobald man diese wieder schließt und erneut auf den Link klickt, tut sich gar nichts mehr. Dies hängt mit dem generierten Javascript Code zusammen, welcher im Hintergrund aufgerufen wird (und welcher eigentlich darauf ausgelegt ist, dass für den Link ein Bild vorhanden ist). Dieses Problem lässt sich aber lösen, indem man zwischen die Link-Tags (gleich vor der Link-Beschriftung) ein leeres Image-Tag einfügt. Dieses Tag (<img>) ist im obigen Beispielcode bereits vorhanden. Damit kann die Lightbox wie gewohnt so viele Male wie gewünscht geöffnet werden.

Sending
Benutzer Bewertung
5 (1 Bewertung)

Pin It on Pinterest

Share This