Seite 1 von 1

Umbau der Lightbox

Verfasst: Mo 23. Sep 2013, 14:14
von npage-user
Hallo mal wieder!

Im Moment bastle ich gerade daran, die Lightbox an das Design von "Holiday Park Up-to-date" anzupassen (Farbe wechseln, closelabel und andere Grafiken erstetzen etc.). Im Prinzip kein Problem, ABER ... :G

Ich hätte es gerne so, dass beim Öffnen der Lightbox der Hintergrund abgedunkelt wird, wie es auf vielen Websites für einen besseren Kontrast der Fall ist. Im Internet habe ich gelesen, dass man irgendwie die overlayOpacity oder so umstellen muss (ist bei mir derzeit auf 0.8). Aber wenn ich das umstelle, passiert rein gar nichts. Und irgendwas soll auch ein sogenannter "z-index" damit zu tun haben.

Kann mir jemand dabei helfen, den Hintergrund abzudunkeln? Ich komme da im Moment echt nicht weiter ... [smilie=shy.gif]

Ach ja, alle wichtigen Dateien ... :X
http://file1.npage.de/005800/03/html/lightbox.css
http://file1.npage.de/005800/03/html/lightbox.js

EDIT: Ich weiß gar nicht, gehört bilder.js auch zur Lightbox?
http://file1.npage.de/005800/03/html/builder.js

Re: Umbau der Lightbox

Verfasst: Mo 23. Sep 2013, 15:18
von Jasko
Hallo

Ich weiss nicht von wo du diese Lightbox hast, aber es gibt lightboxen die bringen es schon im Code mit das der Hintergrund beim öffnen der lightbox so abgedunkelt wird, bei DynamicDrive.com gibt es z.B. solche mit verdunkeln und andere ohne. Also vieleicht da mal umschauen.

Zum zweiten, der z-index regelt die Tiefen-Ebenen eine HTML Seite, sprich was einen höheren z-index hat wird mehr in den vordergrund gerückt als das was einen niedrigen z-index hat. Beispiel: Hat man zwei Bilder die sich überlappen sollen gibt man dem Bild einen höheren z-index das vorne stehen soll, und das Bild mit dem niedrigeren Index wird dahinter platziert bzw. überlappt.

Wenn man das mit der Lightbox macht, wird diese vor dem Text und Bildern auf der Seite angezeigt, gibt man dem Hintergrund der Lightbox dan noch die grösse der ganzen Auflösung sprich 100% und "malt" diesen Grau oder schwartz, wird die ganze Seite dunkel, und nur das Bild ist zu sehen. Und jetzt kommt noch overlayOpacity ins spiel, mit diesem Trick macht man den Hintergrund transparent, und man kan kwasi durch den hintergrund immer noch die Seite sehen, obwohl diese eigentlich ganz verdeckt wird.

Ich hoffe ich konnte ein wenig aufklären, wenn du deine bestehnde lightbox mit diesem effekt ausstaten willst musst du etwas mit dem CSS der lightbox spielen, mit hintergrund, z-index und overlayOpcity....

MFG

Re: Umbau der Lightbox

Verfasst: Mo 23. Sep 2013, 17:20
von npage-user
Naja, im Prinzip ist die Lightbox ja so wie hier: http://www.dynamicdrive.com/dynamicinde ... /index.htm

Jetzt weiß ich zwar, was die einzelnen Begriffe genau bedeuten, aber wenn ich die overlayOpacity ändere oder den z-index, tut sich nichts. :E

Was mir total ins Auge sticht bei der verlinkten Lightbox von "Dynamic Drive", ist der folgende (rot umkringelte) Teil ... Ich weiß aber nicht, wie ich das bei meiner Lightbox anwenden soll.
Bild

Re: Umbau der Lightbox

Verfasst: Di 24. Sep 2013, 13:56
von npage-user
Juhu, heute hab ich es endlich hinbekommen! :G
Das Problem war, dass für den Schatten im CSS-Teil keine Farbe definiert war und deswegen wurde auch keiner angezeigt, egal welchen opacity-Wert ich eingegeben habe.

Wird bei euch eigentlich alles korrekt angezeigt (Hintergrund abgedunkelt, Close-, Prev- und Next-Grafik ausgewechselt, Farbe verändert etc.)??? :W

Re: Umbau der Lightbox

Verfasst: Di 24. Sep 2013, 14:09
von Jasko
Super das du es hinbekommen hast. Manchmal sieht man den Wald vor lauter Bäumen nicht, aber allein geschafft ist es immer noch am bessten.

MFG

Re: Umbau der Lightbox

Verfasst: Di 24. Sep 2013, 21:25
von moni
npage-user hat geschrieben:
Wird bei euch eigentlich alles korrekt angezeigt (Hintergrund abgedunkelt, Close-, Prev- und Next-Grafik ausgewechselt, Farbe verändert etc.)??? :W
hast dein lightbox sehr schön gestaltet .. finde ist ja super Idee mit den Farbpassenden Grafiken und auch rammen , und es klappt alles wunderbar [smilie=clap.gif]

Re: Umbau der Lightbox

Verfasst: Mi 25. Sep 2013, 02:50
von thaileben
wo ist denn nun genau diese ligtbox zu sehen :E

Jürg :X

Re: Umbau der Lightbox

Verfasst: Mi 25. Sep 2013, 07:03
von npage-user
thaileben hat geschrieben:wo ist denn nun genau diese ligtbox zu sehen :E
Als Beispiel könnte man zum Beispiel diese Seite hier nehmen: http://www.holidaypark-uptodate.de/pb-aadp-140913.html
Aber eigentlich sieht man die fast überall, in Newsartikeln, Showseiten, Attraktionsseiten und vielen anderen. :X

Re: Umbau der Lightbox

Verfasst: Mi 25. Sep 2013, 12:34
von thaileben
Ach sooo das sind die kleinen Bildchen zum anklicken.
bei einer wo 2 Bilder waren ging es tatsächlich 1 Minute (habe extra gezählt) bis sich das Rad nicht mehr drehte, da dachte ich kommt Nix mehr.
ansonsten würde es schon toll aussehen

Jürg :X