Umbau der Lightbox

CSS, Java Script u.s.w

Moderator: HTML-Laie

Antworten
Benutzeravatar
npage-user
Webmaster Alt Meister
Webmaster Alt Meister
Beiträge: 1277
Registriert: Sa 19. Feb 2011, 08:53
Mein Vorname: Michael
Wohnort: Haßloch (Rheinland-Pfalz)
Kontaktdaten:

Umbau der Lightbox

Beitrag 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
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Umbau der Lightbox

Beitrag 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
Benutzeravatar
npage-user
Webmaster Alt Meister
Webmaster Alt Meister
Beiträge: 1277
Registriert: Sa 19. Feb 2011, 08:53
Mein Vorname: Michael
Wohnort: Haßloch (Rheinland-Pfalz)
Kontaktdaten:

Re: Umbau der Lightbox

Beitrag 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
Benutzeravatar
npage-user
Webmaster Alt Meister
Webmaster Alt Meister
Beiträge: 1277
Registriert: Sa 19. Feb 2011, 08:53
Mein Vorname: Michael
Wohnort: Haßloch (Rheinland-Pfalz)
Kontaktdaten:

Re: Umbau der Lightbox

Beitrag 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
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Umbau der Lightbox

Beitrag 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
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8335
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: Umbau der Lightbox

Beitrag 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]
Viele Grüße ...Monika
Benutzeravatar
thaileben
Moderator
Moderator
Beiträge: 7770
Registriert: So 26. Sep 2010, 03:47
Mein Vorname: Jürg
Wohnort: nahe Ubon Ratchathani / Thailand
Kontaktdaten:

Re: Umbau der Lightbox

Beitrag von thaileben »

wo ist denn nun genau diese ligtbox zu sehen :E

Jürg :X
Benutzeravatar
npage-user
Webmaster Alt Meister
Webmaster Alt Meister
Beiträge: 1277
Registriert: Sa 19. Feb 2011, 08:53
Mein Vorname: Michael
Wohnort: Haßloch (Rheinland-Pfalz)
Kontaktdaten:

Re: Umbau der Lightbox

Beitrag 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
Benutzeravatar
thaileben
Moderator
Moderator
Beiträge: 7770
Registriert: So 26. Sep 2010, 03:47
Mein Vorname: Jürg
Wohnort: nahe Ubon Ratchathani / Thailand
Kontaktdaten:

Re: Umbau der Lightbox

Beitrag 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
Antworten

Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 16 Gäste