Mit Lightbox werden einzelne Bilder vor einem abgedunkelten Desktop dargestellt. Oft verwendet wird „Lightbox /2“ von Lokesh Dhakar, das auch als Grundlage für diesen Beitrag dient.
Nach der Standard Installation funktioniert alles in der Regel wie gewünscht.
Bis auf eine unschöne Ausnahme: Auf einer Webseite sind zum Beispiel sehr viele Bilder untereinander angeordnet. Der Benutzer scrollt also weit nach unten und klickt ein einzelnes Bild an. Jetzt wird der Hintergrund dunkel – aber es ist kein Bild zu sehen. Der Grund hierfür ist, dass das Bild am oberen Rand der Seite angezeigt wird. Hierfür ist das Element
position:absolute;
in der …/lightbox.css verantwortlich. Es richtet sich nämlich immer nach dem übergeordneten Element, und nicht dem aktuell angezeigten Bildschirmausschnitt. Um dies zu korrigieren und damit sich das angeklickte Bild immer auf dem aktuellen Bildschirmfenster öffnet, führen Sie folgende Schritte durch (gilt für lightbox 2.05):
1. Öffnen Sie die Datei lightbox.js im Ordner …/js
2. In Zeile 231 finden Sie den Eintrag
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
3. Ändern Sie den letzten Wert „/ 10“ zum Beispiel nach „/ 60“.
Zur Kontrolle: die Datei lightbox.css im Verzeichnis ../css enthält als obersten (unveränderten) Eintrag:
#lightbox{ position: absolute;left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
Wenn Sie anschließend die Seite neu Laden, sollte das Bild mit kleinem Abstand unter dem oberen Bildschirmrand angezeigt werden.
Super-Hilfreich, Danke!
JAAAAAA! Es klappt! Vielen Danke!
Erstmal Danke!!!
Durch diesen Ansatz konnte ich eeeeeendlich in Lightbox v2.03.3 innerhalb einer langen Website-Seite (viel Inhalt) das Bild-Fenster normal positionieren (sonst war´s kaum zu sehen). In dieser Version habe ich in lightbox.js in Zeile 411 den letzten Wert von 10 auf 60 geändert und das war in meinem Fall sofort zufriedenstellend in IE und Firefox (ca 11-2013).
Aktuell gibts ja Lightbox 2.6 – und hier habe ich kurz getestet – und das Fenster war auch fast außerhalb des Browserfensters.
Hier nochmal die Zeile 411 mit dem geänderten Wert:
var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 60);
Vielleicht hilfts nochmal jemandem…
Vielen Dank!
Auch mir hat dieser Artikel bei der aktuellen Lightbox Version 2.6 (jquery) weitergeholfen.
In meiner komprimierten Version habe ich folgenden Wert genommen:
o=f.scrollTop()+f.height()/30;
Original war:
o=f.scrollTop()+f.height()/10;
Erstellt von: R.F. Carter am 11.12.2013 20:52
Vielen Dank!!
Hat mir auch super geholfen, war schon halb am verzweifeln :))
Besten Dank für diesen Artikel.
Bei mir haben die Vorschläge so keinen richtigen Erfolg gebracht, habe jedoch eine andere Lösung gefunden:
var lightboxTop = arrayPageScroll[0] statt arrayPageScroll[1]
Version Lightbox v2.04
lightbox.js Zeile 231
var lightboxTop = arrayPageScroll[0] + (document.viewport.getHeight() / 10);