Suche
Teilen
startseite » forum

perfectlightbox legt overlay über die Lightbox [Gelöst]

  • Schmoozer Schmoozer
    Sternenflotten-Admiral
    0 x
    223 Beiträge
    0 Hilfreiche Beiträge
    26. 02. 2013, 15:05

    Hi Forum,

    Ich habe ein Problem mit der Perfectlightbox.

    Bei zwei Auftritten (Typo3 4.7.7 und Typo3 4.5.2) ist es so, dass sich die Perfectlightbox bei Klick auf das Bild zwar öffnet, danach aber erst die Fläche geladen wird, die den Hintergrund abdunkelt (div id="sbOverlay"). Die Overlayfläche setzt sich dann über alle anderen Flächen drüber, auch über das Bild selber.

    Zuerst dachte ich, dass das ein Konflikt zwischen verschiedenen JS-Libraries währe, da auf dem älteren AUftritt auch Mootools zum Einsatz kommt, aber nach ausstellen aller anderen Extensions tritt der Fehler immer noch auf.

    Kennt jemand anderes auch schon dieses Phänomen?

    Unter diesem Link kann man sich den Fehler ansehen: [url=http://hotel-klumpp.de/aktivitaeten.html]http://hotel-klumpp.de/aktivitaeten.html[/url]
    Die Schwarzweißbilder unten in der Seite sind mit der perfectlightbox verlinkt.

    Vielen Dank schonmal im Vorraus,
    Jens

    EDIT:
    In beiden fällen kommt die perfectlightbox v3.1.4 zum Einsatz

  • 1
  • Gregor Gregor
    R2-D2
    0 x
    65 Beiträge
    0 Hilfreiche Beiträge
    26. 02. 2013, 15:52

    Hallo Jens,

    liegt denke ich einfach daran, dass die HTML-Inhalte der Lightbox bei dir falsch generiert werden.

    Die Reihenfolge ist bei dir

    1. <div id="sbCenter"></div>
    2. <div id="sbBottomContainer">
    3.   <div id="sbBottom">
    4.     <div id="sbOverlay"></div>
    5.   </div>
    6. </div>

    Müsste aber sein folgendermaßen sein (auf Basis von verschiedenen unserer Seiten, wo die Extension integriert ist):

    1. <div id="sbOverlay"></div>
    2. <div id="sbCenter"></div>
    3. <div id="sbBottomContainer">
    4.   <div id="sbBottom"></div>
    5. </div>

    Nimm einfach mal ne andere Version der Extension und schau dann, ob es korrekt generiert wird. Aber da so das Overlay innerhalb eines der anderen Container liegt überlagert es entsprechend auch die Bilder.

    Und wo ich geschaut hatte läuft die Perfect Lightbox 3.1.1 momentan, evtl. tatsächlich ein Versionsproblem.

    Viele Grüße
    Gregor

  • Schmoozer Schmoozer
    Sternenflotten-Admiral
    0 x
    223 Beiträge
    0 Hilfreiche Beiträge
    26. 02. 2013, 16:02

    Hallo Gregor,

    Diese unstimmigkeit im Code ist mir auch aufgefallen, das habe ich ober vergessen zu erwähnen.
    Nach schrittweisen downgrades bis zur 3.0.0 hat sich das Problem leider nicht geändert.

    Ich setze die 3.1.4 auch bei anderen Auftritten ein und habe sonst nirgends dieses Problem :-(

  • Schmoozer Schmoozer
    Sternenflotten-Admiral
    0 x
    223 Beiträge
    0 Hilfreiche Beiträge
    28. 02. 2013, 15:45

    Ein Kumpel von mir hat es jetzt gelöst bekommen:

    in der slimbox.2.0.4.js musste folgendes geändert werden:

    1. bottom = $('<div id="sbBottom" />').appendTo(bottomContainer).append([
    2.             $('<a id="closeLink" href="#" />').add(overlay).click(close)[0],
    3.             /* BEN: */
    4.             playLink = $('<a id="playLink" href="#" />').click(play)[0],
    5.             pauseLink = $('<a id="pauseLink" href="#" />').click(pause)[0],
    6.             saveLink = $('<a id="saveLink" href="#" target="_blank" />')[0],
    7.             /* :NEB */                                                                 
    8.             caption = $('<div id="sbCaption" />')[0],
    9.             number = $('<div id="sbNumber" />')[0],
    10.             // BEN: Adding presentation mode
    11.             present = $('<div id="sbPresent" />')[0],
    12.             // :NEB
    13.             $('<div style="clear: both;" />')[0]
    14.         ])[0];


    in folgendes ändern:

    1. bottom = $('<div id="sbBottom" />').appendTo(bottomContainer).append([
    2.             $('<a id="closeLink" href="#" />').click(close)[0],
    3.             /* BEN: */
    4.             playLink = $('<a id="playLink" href="#" />').click(play)[0],
    5.             pauseLink = $('<a id="pauseLink" href="#" />').click(pause)[0],
    6.             saveLink = $('<a id="saveLink" href="#" target="_blank" />')[0],
    7.             /* :NEB */                                                                 
    8.             caption = $('<div id="sbCaption" />')[0],
    9.             number = $('<div id="sbNumber" />')[0],
    10.             // BEN: Adding presentation mode
    11.             present = $('<div id="sbPresent" />')[0],
    12.             // :NEB
    13.             $('<div style="clear: both;" />')[0]
    14.         ])[0];

    Grüßle,
    Jens

  • mmecker mmecker
    Padawan
    0 x
    49 Beiträge
    0 Hilfreiche Beiträge
    15. 04. 2013, 10:48

    Ich hatte dasselbe Problem nach Aktualisierung einer Website auf 4.7.7.
    Ich verwende t3jquery und hatte bei der Aktualisierung auch gleich JQuery auf die aktuelle Version gebracht. Und da lag bei mir das Problem: Offenbar ist perfectlightbox bislang nicht kompatibel zu jQuery 1.9 bzw. 1.10.
    Nach zurücksetzen auf 1.8.3 funktioniert die Lightbox wieder. Auf Dauer ist das allerdings keine Lösung...

  • mmecker mmecker
    Padawan
    0 x
    49 Beiträge
    0 Hilfreiche Beiträge
    06. 05. 2013, 13:08

    Nachdem ich das Problem jetzt zum zweiten Mal hatte und mir die Lösung erst wieder raus suchen musste, notiere ich es mir nun auch hier: ;)

    Die Slimbox 2.0.4, die in perfectlightbox für jQuery-Umgebungen verwendet wird, verwendet eine nicht mehr gültige Syntax. Dabei geht es um die Zeile 44ff.

    1. bottom = $('<div id="sbBottom" />').appendTo(bottomContainer).append([
    2. 	$('<a id="closeLink" href="#" />').add(overlay).click(close)[0],
    3. ...
    4. ])[0];

    muss in 
    1. bottom = $('<div id="sbBottom" />').appendTo(bottomContainer).append([
    2. 	$('<a id="closeLink" href="#" />').click(close)[0],
    3. ...
    4. ])[0];

    geändert, also das add(overlay) an dieser Stelle entfernt werden.
    Die Anweisung hatte den Zweck, den Eventhandler "click(close)" auch auf den overlay anzuwenden. Nach der Syntaxüberarbeitung von jQuery verhält sich das aber "logischer" und hängt das overlay-Element ins sbBottom-Element ein, also nach dem Bild und mit dem z-index von sbBottomContainer.
    Damit das Schließen durch Klick auf den overlay wieder funktioniert, muss die close-Anweisung weiter oben (Z.29ff.) ergänzt werden:
    1. $('body').append(
    2. 	$([
    3. 		overlay = $('<div id="sbOverlay" />').click(close)[0],
    4. 		...
    5. 	]).css('display', 'none')
    6. );

    Um die veränderte slimbox.2.0.4b.js wieder einzubinden, bietet perfectlightbox einen einfachen Weg: Im Konstanten-Editor einfach unter
    Path to the Slimbox2 Script [plugin.perfectlightbox.slimbox2Path]
    hochladen.

  • jpsy jpsy
    Padawan
    0 x
    44 Beiträge
    0 Hilfreiche Beiträge
    06. 06. 2013, 23:22

    Die Lösung ist viel einfacher:
    Die aktuelle Perfect Lightbox (3.1.4) ist noch nicht kompatibel mit jQuery 1.9.
    Verwendet die jüngste 1.8er (z.B. http://code.jquery.com/jquery-1.8.3.min.js) und schon klappts mit den Nachbarn.

  • mmecker mmecker
    Padawan
    0 x
    49 Beiträge
    0 Hilfreiche Beiträge
    05. 12. 2013, 11:07

    ja, richtig, die einfachste Lösung ist wie schon beschrieben, jQuery auf 1.83 zurückzufahren. Nun will aber nicht jeder vor der Alternative stehen, entweder dauerhaft auf ein aktuelles jQuery oder auf perfectlightbox zu verzichten. Natürlich kann man die Lightbox in jQuery auch ohne perfectlightbox bekommen, aber es ist halt schon sehr bequem... ;)
    Daher kurz nochmal die Schritte:
    1. aus perfectlightbox /res/js/slimbox.2.0.4.js (das ist die unkomprimierte Version)runterladen
    2. wie oben beschrieben das '.add(overlay)' aus Zeile 45 raus kürzen
    3. damit ein Click ins Overlay das Bild wieder schliesst, das nachfolgende '.click(close)[0]' wie oben gezeigt in die Zeile 31 kopieren (die [0]in ''<div id="sbOverlay" />')[0]' damit ersetzen)
    4. das veränderte Script abspeichern, in den Konstanten-Editor gehen und den Eintrag 'Path to the Slimbox2 Script [plugin.perfectlightbox.slimbox2Path]' aufsuchen. Nach Anklicken des Stift erscheint ein Dateiupload; darüber das veränderte File hochladen. Fertig.

  • 1
Präsentiert von