✔ Dynamische Top-Position für Lightbox2

[Recoil19]

Hallo zusammen,

ich habe eine Frage bzgl. der "Top"-Positionierung für die Lightbox2.

Die Top-Position der Lightbox kann man mittels CSS-Attribut (z.B. "top:10px !important;") definieren.

Nun würde ich Top-Position der Lightbox gerne dynamisch gestalten, d.h.
> für ein Image Set mit großen Bildern erscheint die Lightbox am oberen Rand der Seite
> für ein Image Set mit kleinen Bildern würde ich die Lightbox gerne tiefer setzen, sprich zentrieren


Die CSS-Definitionen der Lightbox sind an sich als Individualformate ('#') definiert:

#lightbox {
position: absolute;
top: 0px !important;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}


Der (bekannte) Aufruf der Lightbox:

<a href="http://www.tutorials.de/forum/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Da die Lightbox-Funktion mittels "rel" referenziert wird ist mir unklar ob eine temporäre Änderung (mittels "style"?) überhaupt möglich ist bzw. falls doch, wie sieht die Syntax dazu aus?


Vielen Dank für eure Hilfe!

 

[Maik]

Hi,

Nun würde ich Top-Position der Lightbox gerne dynamisch gestalten, d.h.
> für ein Image Set mit großen Bildern erscheint die Lightbox am oberen Rand der Seite
> für ein Image Set mit kleinen Bildern würde ich die Lightbox gerne tiefer setzen, sprich zentrieren

ich schieb deine Frage mal in unser Javascript-Forum, wenngleich ich mir gerade nicht sicher bin, ob sich dein Vorhaben überhaupt in die Tat umsetzen lässt.

mfg Maik

 

[Sven Mintel]

Moin,

die top-Angabe für #lightbox ist ohne Bedeutung, da sie vom Lightbox-Skript dynamisch gesetzt wird(es ist prinzipiell also möglich).

Die entsprechende Anweisung im Skript ist jene

var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);

...dort könntest du also anhand des jeweiligen Image-Sets eingreifen.

 

[Recoil19]

Sven,

danke für Deinen Hinweis.
Die Top-Angabe für #lightbox IST jedoch von Bedeutung!
Bei meinen Tests allerdings nur dann, wenn "!important" spezifiziert wird.

Ich habe das Problem nun anders gelöst: da sich die unterschiedlichen Image Sets auf unterschiedlichen HTML-Seiten befinden, verwende ich einfach unterschiedliche CSS-Files, welche bis auf die TOP-Angabe identisch sind.
Das ist zwar die simpelste aber nicht gerade die eleganteste Lösung...

Tom

 

[Sven Mintel]

Und wie wirst du das per CSS zentrieren, ohne die aktuelle Höhe des viewports/die aktuelle Scrollposition zu kennen?

 

[Recoil19]

Sven,

über CSS geht es natürlich nur statisch. D.h. ich muss mich immer am höchsten Bild eines Image Sets orientieren und dann entsprechend die Top-Position setzen.

Soweit ich es verstanden habe wird das Setzen von "lightboxTop" in der Funktion "Start" vor dem Laden eines Bildes durchgeführt, d.h. man weiß zu diesem Zeitpunkt noch gar nicht wie hoch das anzuzeigende Bild sein wird.
Man müsste also meines Erachtens in der Funktion "resizeImageContainer" entsprechend eingreifen um die Lightbox erneut zu positionieren.
Das Umbauen des Java Scripts, dass sich die Lightbox jedesmal genau in die vertikale Mitte positioniert übersteigt aber meine Jave Script-Kenntnisse bei weitem!

Tom