Hallo zusammen,
ich habe die Erweiterung PerfectLightBox installiert und soweit funktioniert es
auch.
Allerdings vermisse ich den Effekt des abgedunkelten Hintergrundes.
Was muss ich tun, damit sich beim Anklicken eines Bildes der Hintergrund verdunkelt?
In der Original CSS-Datei gibt es eine Definition für Overlay und da ist Schwarz als Hintergrundfarbe angegeben. Bin mir aber nicht wirklich sicher, ob dies die richtige Stelle ist oder ob man noch an anderer Position was ändern muss.
Bereits jetzt vielen Dank für eure Tipps.
LG,
Michael
Eigentlich ist es bei der Extension standard, dass der Hintergrund abgedunkelt wird, soweit ich mich errinnere. Ganz ohne weiteres zutun. Vielleicht ein Konflikt mit deinem CSS oder der HTML-Struktur? Schon auf verschiedenen Browsern getestet?
Hallo,
das hört sich für mich eher nach einem JavaScript Problem an.
Wird ein JS-Fehler angezeigt?
Hast du Firefox mit installiertem Firebug? Dann sehe einmal nach, ob am Ende des HTML-Documents ein DIV mit der ID "sbOverlay" existiert und ob da das CSS passt. Am Besten vergleichst du das mit einer anderen Website, auf der die Lightbox installiert ist.
Grüße
aclaes schrieb
Hallo,
das hört sich für mich eher nach einem JavaScript Problem an.
Wird ein JS-Fehler angezeigt?
Hast du Firefox mit installiertem Firebug? Dann sehe einmal nach, ob am Ende des HTML-Documents ein DIV mit der ID "sbOverlay" existiert und ob da das CSS passt. Am Besten vergleichst du das mit einer anderen Website, auf der die Lightbox installiert ist.
Grüße
Keine JavaScript-Fehler, jedoch eine Besonderheit im Quelltext. Da wird der DEV mit der ID "sbOverlay" erzeugt und sofort wieder geschlossen, bevor das eigentliche Bild dargestellt wird. Müsste es nicht eher so sein, dass als erstes der DIV "sbOverlay" erzeugt wird, dann der Rest und am Ender DIV "sbOverlay" wieder geschlossen wird ?
Im Quelltext sieht das so aus
<div style="visibility: visible; opacity: 0.8;" id="sbOverlay"></div>
<div class="" style="top: 226px; width: 758px; height: 521px; margin-left: -379px; left: 952px;" id="sbCenter">
<div style="visibility: visible; opacity: 1; background-image: url(URL zum BILD);" id="sbImage">
<div style="position: relative; width: 738px; height: 501px;">
<a style="display: none; height: 501px;" href="#" id="prevLink"></a>
<a style="display: none; height: 501px;" href="#" id="nextLink"></a>
</div>
</div>
</div>
<div style="left: 952px; width: 758px; top: 747px; margin-left: -379px;" id="sbBottomContainer">
<div style="margin-top: 0px;" id="sbBottom">
<a style="" href="#" id="playLink"></a>
<a style="display: none;" href="#" id="pauseLink"></a>
<a style="display: none;" target="_blank" href="#" id="saveLink"></a>
<a href="#" id="closeLink"></a>
<div id="sbCaption">CRM-Software</div>
<div id="sbNumber"></div>
<div style="display: none;" id="sbPresent"></div>
<div style="clear: both;"></div>
</div>
</div>
LG,
Michael
OK, ich hab's gerade selbst gelöst 🙂
Hatte mir die Orignal-Styles in eigene Datei kopiert und diese auch referenziert. Doch beim Kopieren sind mir aus für mich nicht nachvollziehbaren Gründen die Definitionen für sbOverlay abhanden gekommen. #angry#
Diese einfach wieder eingefügt und schwupp die wupp klappts auch mit dem Abdunkeln.
Also, alles ist gut.
Vielen Dank noch für den Tipp mit Firebug, kannte ich bisher nicht, hat sich aber bereits jetzt schon zu meinem Liebling erklärt.
LG,
Michael