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

Lightbox und Pagebuilder

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von simmassim, 11. Januar 2016.

  1. simmassim

    simmassim Active Member

    Registriert seit:
    16. Dezember 2015
    Beiträge:
    28
    Zustimmungen:
    0
    Hallo zusammen

    Es geht um die Seite: http://wp.weyrauch.ch/our-shoes/loafer/

    Ich habe das Plugin "photo gallery" installiert und möchte nun mit Pagebuilder in einer row drei Bilder anzeigen lassen. Ich konnte mit dem Plugin eine Photogalerie erstellen mit den drei Bildern. Auch wenn ich nun auf eines der Bilder klicke wird es vergrössert und ein Overlay sollte hinter dem Bild den ganzen Screen überdecken mit einer eingestellten Transparenz. Wenn ich nun auf eines der Bilder klicke wird zwar ein Overlay über den Hintergrund gelegt, jedoch nur über die Row, in welcher ich die Photogalerie eingefügt habe. Ich weiss, dass ich das Problem umgehen kann, indem ich den Pagebuilder nicht nutze, doch das möchte ich versuchen zu vermeiden. Ich habe nun auch bereits im CSS-Code meines Child-Themes folgenden Code eingefügt:

    .spider_popup_overlay_0 {
    background-height:1000px !important;
    background-color: #000000 !important;
    opacity: 0.5 !important;
    z-index: 1000 !important;
    }

    Ich habe das .spider_popup_overlay_0 als den vom Plugin photogallery erstellten container für den overlay identifiziert. Doch leider passiert nichts wenn ich diesen wie oben beschrieben abändere. Ich habe auch bereits in den Files des Plugins gesucht, ob ich da irgend etwas finde wo ich anstatt den Rows einfach den ganzen spider-container abdunkeln kann (bei klick auf eines der Bilder) - leider ohne Erfolg..

    Hatte jemand von euch bereits dasselbe Problem?
    Ich wäre über einen Lösungshinweis unglaublich dankbar.

    Simon
     
  2. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    .panel-row-style bekommt per CSS overflow:hidden. Das hindert den darin liegenden div, einen größeren Bereich zu überlagern, als das Elternelement.
     
  3. simmassim

    simmassim Active Member

    Registriert seit:
    16. Dezember 2015
    Beiträge:
    28
    Zustimmungen:
    0
    Danke SirEctor!! Hat wunderbar funktioniert. Nun ist nur noch eine Linie (hr.style-two (=Trennstrich unter der ersten Bildereihe) http://wp.weyrauch.ch/our-shoes/boot/) immer noch im Vordergrund (wie auch das Menu und das Logo oben links).

    Ich habe den Z-Index auf -11 gesetzt, dass die Linie sicher hinter dem "spider-overlay"-layer liegt:
    hr.style-two {
    border: 0;
    height: 1px;
    margin: 27px 80px 27px 0px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(219, 163, 153, 1), rgba(0, 0, 0, 0));
    z-index: -11 !important;
    }

    Doch leider funbktioniert das nicht. Die Lightbox überdeckt die Linie wie das Menu nicht. Wie kann ich diese auch überdecken lassen?

    Zudem habe ich noch ein kleines Problemchen, dass wenn ich das Bild anklicke, wird der Scrollbalken rechts aufgelöst und die gesamte Page wird leicht nach rechts verschoben. Ich habe nun versucht, einen Scrollbalken per css einzufügen. Leider wird kein "richtiger" Scrollbalken eingefügt, sondern nur eine Linie, die sich vor/über die Page legt, aber nicht als Abstand dient. Die Page wird also weiterhin nach rechts "gestretched". Wie bring ich es hin, dass da rechts eine Art Platzhalter eingefügt wird, dass es beim Anklicken des Bildes / Starten der Lightbox die page nicht nach rechts über den vorher noch angezeigten Scrollbalken ausgedehnt wird?
     
  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