lightbox frage

[TG90]

mahlzeit,

hab ein Problem mit der lightbox..
Möchte auf meine homepage natürlich Bilder mit hoher auflösung hochladen.
Problem allerdings, bei mir sprengts dann das Fenster. Die lightbox ist größer als der bildschirm, man muss erstmal nach rechts scrollen um sie wieder zu schließen....

Ich bekomm es einfach nicht hin, dass je nachdem wer auf meine Seite geht, dass bei dem jenigen ganz einfach max. 90% des Bildschirms ausgfüllt werden.

Hat jemand damit Erfahrung?

 

[sagert90]

AW: lightbox frage

Hey,

ich bin selber nicht der aller erfahrenste aber kann es sein, dass du die LIghtbox in einen div-container eingebunden hast, dessen Größe nicht deffiniert ist?
Soweit ich weiß, passt die LIghtbox sich nämlich an die Größe des Elements an, von dem sie umgeben ist bzw. in dem sie implementiert ist...

lg

 

[leveler]

AW: lightbox frage

Ohne Code ist`s immer schwer zu beurteilen, wo der Fehler liegt. Daher: Code posten.

 

[splasch]

AW: lightbox frage

Die lightbox passt sich immer der größe des Fotos an. Daher mußt du dann auch Seitlich scrollen.
Du brauchst das Foto nur kleiner zu machen dabei kannst du aber die Hohe Auflösung des Foto bei behalten.

Mfg Splasch

 

[TG90]

AW: lightbox frage

danke erstmal,
meld mich leider erst heute wieder zu Wort, da ich kein Internet hatte.
montage - drecks hotel

@ sagert, egal welchen Wert ich festlege, bringt nichts.

@ splasch, ja, das habe ich gemerkt, dass sie sich immer der Größe des Bildes anpasst.
Sowie ich es versteh, meinst du ich soll die Bilder dierekt verkleinert hochladen.

Aber wenn ich sag, ich möchte es gerne so haben,
dass die jenigen,

die einen kleinen Bildschirm haben, die Bilder verkleinert sehen.
die einen großen Bildschirm haben, die Bilder groß/original sehen.

ca. max. 90% des Bildschrims.

kennt da einer eine Lösung?

hatte in der lightbox.css Datei eines geändert.

#lightbox img{ max-width: 90%; max-height: 90%;}

das Bild ist jetzt jedenfalls kleiner, nur die box selber bekomm ich ganz und garnicht kleiner.

jeder versuch, verzehrt sie schlimmer.

#lightbox{	position: absolute;	left: 0; max-width:90%; max-height:90%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ max-width: 90%; max-height: 90%;}
#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: 90%; height: 500px; background-color: #000; }