Lesefortschritt:

Bildergalerie im Lightbox-Popup öffnen

5. Februar 2025 | Divi-Theme, Scripts

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

Einheit im Divi-Zählermodul ändern

Das Divi-Theme beinhaltet ein adrettes Zählermodul. Doch standardmässig zeigt dieses stets ein Prozentzeichen als Einheit an. Das passt natürlich nicht immer. Sie können das Zeichen aber auf einfache Weise entweder ganz ausblenden oder - noch ...

Mobiles Divi-Menu mit Scrollfunktion

Wenn Sie viele Menüpunkte in Ihrem Divi-Menü aufführen, kann es vorkommen, dass es auf Mobilanzeigen höher ist als der anzeigbare Bereich des Displays. Gerade bei Untermenüs kann das schnell mal passieren und es können einige der Menü-Punkte ...
Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.