Trick # 427 | Dieser Beitrag beinhaltet 535 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Die Divi-Galerie lässt sich Bild für Bild in einer Lightbox öffnen, ohne die eigentliche Galerie auf der Seite anzuzeigen. Die Photoshow kann per Klick auf einen Link oder Button ganz einfach gestartet werden und poppt dann auf.
Für diesen Trick müssen Sie eine Handvoll Schritte durchgehen:
- Der erste Schritt besteht darin, ein Divi-Galeriemodul in Ihrem Layout zu platzieren und Ihre Bilder hinzuzufügen.
- Im nächsten Schritt blenden Sie das Galerie-Modul aus, indem Sie in den Galerie-Einstellungen den Tab «Erweiterte» öffnen und dort auf «Benutzerdefiniertes CSS» klicken. Im folgenden Fenster geben Sie im Feld «Hauptelement» den Code
display: none !important;ein. - Nun wechseln Sie – immer noch im «Erweitert»-Tab – auf «CSS-ID und Klassen» und geben die Klasse «gallery» ins Textfeld «CSS-Klasse ein.
Jetzt folgt ein Script, welches Sie im <head>-Bereich Ihrer Website ablegen. Dies können Sie im Backend unter Divi/Theme-Optionen/Integration tun. Wahlweise können Sie das Script auch in einem Code-Modul auf derselben Seite wie das Galerie-Modul deponieren:
<Script>
jQuery(document).ready(function(){
jQuery('.gallery-trigger').click(function(){
jQuery('.gallery .et_pb_gallery_item:nth-child(1) img').click();
});
});
</Script>
Nun benötigen Sie noch einen Link, um die Photoshow zu starten.
Entweder mittels eines Buttons, dem Sie als Linkadresse ein # vergeben. Ausserdem müssen Sie im «Erweitert»-Tab des Buttons unter «CSS-ID und Klassen» den Passus «gallery-trigger» ins Textfeld «CSS-Klassen» eingeben.
Wahlweise können Sie auch einen Textlink setzen. Etwa mit folgendem Code, den Sie in der HTML- oder Text-Ansicht Ihres WYSIWYG-Editors einfügen können:
<a class="gallery-trigger" href="#">Photoshow per Link starten</a>
Für unser Beispiel haben wir einen Button als Auslöser gewählt. Ein Klick darauf öffnet unsere Photoshow.
Hübsch. Oder?
Werbung


