Swag Lightbox Plugin

Hi, ich hab mal die neue Lightbox ein bisschen angepasst, damit wenn der User schon mal ein bisschen gescrollt hat und dann auf das Image klickt nicht die Lightbox oben am Webseiten klebt, sondern sich am Browserfenster-Rand (sprich an der aktuellen Position)öffnet ;-)) Die 2 Zeilen mit den Änderungen habe ich kommentiert - also wer Lust hat kann es ja mal ausprobieren. Schöne Grüsse Jörg /* Lightbox */ #swag_lightbox { background: #fff url(…/img/ajax-loader.gif) no-repeat center center; padding: 4px; -webkit-box-shadow: 0px 0px 6px #111; -moz-box-shadow: 0px 0px 6px #111; box-shadow: 0px 0px 6px #111; -webkit-border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; position: fixed; /* JIPO von absolute auf fixed */ z-index: 11000; top: 5px; left: 50%; width: 250px; height: 250px; margin-left: -125px; } #swag_lightbox.active { background: #fff } #swag_close { background: url(…/img/close.png) no-repeat center center; width: 30px; height: 30px; position: fixed; /* JIPO von absolute auf fixed */ z-index: 12000; cursor: pointer; top: 0; left: 50%; }

in welcher Datei muss man die Änderungen vornehmen? gruss ssamy

@ssamy ind der swag_lightbox.css Hallo Jipo, habe es gerade so übernommen, aber bei mir hängt es immer noch oben am Rand, da hat sich nicht viel geändert! Cache habe ich gelöscht! Schöner fände ich es, wenn es wie früher in der Mitte aufgeht.

Danke petra! ssamy

Ich habe die Lightbox jetzt etwas runter gezogen, was ich viel besser finde. Dazu habe ich hier top: 5px; auf 48px geändert #swag\_lightbox { background: #fff url(../img/ajax-loader.gif) no-repeat center center; padding: 4px; -webkit-box-shadow: 0px 0px 6px #111; -moz-box-shadow: 0px 0px 6px #111; box-shadow: 0px 0px 6px #111; -webkit-border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; position: fixed; z-index: 11000; top: 48px; left: 50%; width: 250px; height: 250px; margin-left: -125px; } und hier height: 30px in 100px #swag\_close { background: url(../img/close.png) no-repeat center center; width: 30px; height: 100px; position: fixed; z-index: 12000; cursor: pointer; top: 0; left: 50%; } Danke Jipo für Deine Idee!

1 Like

Hi, ihr müsst auch die Caches löschen im Backend - glaub ich zumindest :wink: Das funktioniert bei uns auf allen Browsern sehr gut, weil der Hintergrund scrollt und das Bild nicht mehr an die Seite gekoppelt ist. Vg Joerg