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

    Mobilmenü im Divi-Footer deaktivieren

    Standardmässig macht das Divi-Theme aus jedem Menü auch eine mobile Variante für Tablets und Mobiltelefone. Das ist meist patent - oft braucht man auf diesen Geräten aber kein Footer-Menu. Wenn Ihnen das Standardmenu im Header auf Mobilgeräten ...
    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.