Toni: Lightbox ist verschoben?!

Hallo,

seitdem ich meiner Homepage ein neues Design verpasst habe, werden die Bilder beim Vergrößern (durch Klicken auf das Bild) immer ziemlich weit nach unten verschoben, wo durch man manchmal sogar auf der Seite nach unten scrollen muss, um das vergrößerte Bild zu sehen.
Leider kann ich den Fehler nicht finden, der eigentlich ja nur in der lightbox.css Datei liegen kann, weshalb ich mich sehr freuen würde, wenn mir da jemand weiterhelfen könnte :)

lightbox.css

  
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}  
#lightbox img{ width: auto; height: auto;}  
#lightbox a img{ border: none; }  
  
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }  
#imageContainer{ padding: 10px; }  
  
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }  
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }  
#imageContainer>#hoverNav{ left: 0;}  
#hoverNav a{ outline: none;}  
  
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }  
#prevLink { left: 0; float: left;}  
#nextLink { right: 0; float: right;}  
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }  
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }  
  
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }  
  
#imageData{	padding:0 10px; color: #666; }  
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	  
#imageData #caption{ font-weight: bold;	}  
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			  
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	  
  
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }  
  

Mit freundlichen Grüßen,
Toni

Auf der Seite kann man das Verschieben der Bilder beim Vergrößern sehr gut sehen: http://www.tonis-welt.bplaced.de/fotos_2011-1.php

  1. Lieber Toni,

    ich nutze die Lightbox nicht (hab mir dazu was eigenes gebaut), aber vielleicht gibt es eine Einstellung im Script, die das verkleinerte Darstellen ermöglicht, damit die Vollansicht in den aktuellen Viewport passt?

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. vielleicht gibt es eine Einstellung im Script, die das verkleinerte Darstellen ermöglicht, damit die Vollansicht in den aktuellen Viewport passt?

      Hallo Felix,

      aber das komische ist ja, dass das Skript sonst immer ohne Probleme funktioniert hat :/
      Hat vielleicht noch jemand anderes einen Lösungsvorschlag? :)

      Mit freundlichen Grüßen,
      Toni

      1. Om nah hoo pez nyeetz, Toni!

        Hat vielleicht noch jemand anderes einen Lösungsvorschlag? :)

        es gibt ein aktuelleres prototyp-framework (1.6.0.2 vs 1.7).

        Matthias

        --
        1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. es gibt ein aktuelleres prototyp-framework (1.6.0.2 vs 1.7).

          Aber irgendwo muss doch in meinem Quellcode ein Fehler sein, denn es hat ja sonst auch immer funktioniert :(

          1. Om nah hoo pez nyeetz, Toni!

            Aber irgendwo muss doch in meinem Quellcode ein Fehler sein, denn es hat ja sonst auch immer funktioniert :(

            einer? - viele!

            Hast du denn das Prototype-Framework getauscht? - Nein, jedenfalls nicht bis jetzt.

            Matthias

            --
            1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
  2. Moin!

    seitdem ich meiner Homepage ein neues Design verpasst habe, werden die Bilder beim Vergrößern (durch Klicken auf das Bild) immer ziemlich weit nach unten verschoben, wo durch man manchmal sogar auf der Seite nach unten scrollen muss, um das vergrößerte Bild zu sehen.
    Leider kann ich den Fehler nicht finden, der eigentlich ja nur in der lightbox.css Datei liegen kann, weshalb ich mich sehr freuen würde, wenn mir da jemand weiterhelfen könnte :)

    Ich würde eher davon ausgehen, dass die Lightbox vollkommen in Ordnung ist, und du durch deinen Designwechsel jetzt was verbastelt hast.

    - Sven Rautenberg

    1. Om nah hoo pez nyeetz, Sven Rautenberg!

      Ich würde eher davon ausgehen, dass die Lightbox vollkommen in Ordnung ist, und du durch deinen Designwechsel jetzt was verbastelt hast.

      Ich habe festgestellt, dass das auch von den Browserversionen abhängig ist, nach einem Wechsel von 1.6 auf 1.7 funktionierte es auch im IE9 richtig.

      Matthias

      --
      1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
  3. Hallo,

    naja, wenn das alles relativ positioniert ist, ist es doch kein Wunder, wenn das tiefer ist als vorher, wenn Du am Layout (=Tabellen?) was geändert hast?

    http://www.tutorials.de/css/282143-lightbox-fenster-startposition-veraendern.html bzw. in diese Richtung würde ich schauen.

    Gruß

    jobo

  4. Hi,

    ich hatte mit meinem lightbox-ähnlichen Tool (Slidewindow) ähnliche Probleme.

    Lag sicher nicht an Slidewindow - aber an meinen Modifikationen. Ich wollte es erst ewig reparieren, bin dann aber auf Colorbox umgestiegen. Da hat man sehr sehr viele Anpassungsmöglichkeiten, ohne etwas kaputtmachen zu müssen.

    Schau dir das doch mal an

    Gruß
    Alex