Backgroundimage via Button in Lightbox öffnen

  • Hallo liebe Community,

    ich habe ein paar Elementor pages dessen 'sections' Hintergrund-Bilder haben. Diese Hintergrundbilder sind teils von UI Elemeten und Content verdeckt, daher ist die Anforderung diese per Button in einer Lightbox mitsamt titel und caption anzeigen zu können.

    Ich habe bereits mit einem javascript-script (jQuery) in meinem Childtheme einige tölpelhafte versuche unternommen vom Button auf die parent section zu kommen die background image url auszulesen und dann in einer jQuery lightbox zu öffnen.
    Hier fehlen mir dann aber die Wordpress metadaten zum image um diese ebenso in meinen jQuery aufruf zu integrieren.

    Hier mal ein Bespiel:
    ```
    jQuery(document).ready(function($) {
    $(".show-section-image-button").click(function() {
    var section = this.closest("section");
    var backgroundImageUrl = window.getComputedStyle(section, false).backgroundImage;
    var cleanBackgroundImageUrl = backgroundImageUrl.replaceAll("url(\"", "").replaceAll("\")", "");

    if(cleanBackgroundImageUrl.match(/\.(jpeg|jpg|gif|png)$/) != null) {
    console.log('open image: ' + cleanBackgroundImageUrl);

    $.fancyboxforwp.open('<img src=' + cleanBackgroundImageUrl + '></img><h3>You are awesome!</h3>');
    }

    return false;
    });
    });
    ```

    die jQuery Aufrufe scheinen bei den Plugins wenig bis garnicht dokumentiert zu sein (oder ich stell mich zu doof an).

    Daher die Frage wie würdet ihr diese Anforderung umsetzen?
    Gibts es evtl. Wordpress Boardmittel mit denen man sich hier behelfen kann oder ist ein custom jQuery script die beste Lösung?
    Falls letzteres zutrifft würde mich interessieren wie ich denn aus einem script am besten eine lightbox inklusive caption und description öffne?

    Vielen Dank für jede Hilfe ;)

    Gruß Peter

    [COLOR=#ff0000]Bitte halte Dich an die Forenregel bzgl. Crosspostings. Wenn Du weitere Anmerkungen hast, dann bitte im verherigen Thread (s.a. Antwort von @b3317133[/COLOR]

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!