1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Backgroundimage via Button in Lightbox öffnen

Dieses Thema im Forum "Allgemeines" wurde erstellt von iLem0n, 22. Januar 2023.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. iLem0n

    iLem0n Member

    Registriert seit:
    7. September 2021
    Beiträge:
    5
    Zustimmungen:
    0
    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

    Bitte halte Dich an die Forenregel bzgl. Crosspostings. Wenn Du weitere Anmerkungen hast, dann bitte im verherigen Thread (s.a. Antwort von @b3317133
     
    #1 iLem0n, 22. Januar 2023
    Zuletzt von einem Moderator bearbeitet: 23. Januar 2023
  2. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.636
    Zustimmungen:
    1.778
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden