Lightbox Image Resize.

[emvy03]

Hi,

I hope I've not misinterpreted this forum as my lightbox question has nothing to do with php.

Basically, I have a lightbox set up to display images that a user has uploaded to a gallery, however they are all of different sizes. How would I go about modifying the lightbox css file so that the popup gallery shows all images the same size?

 

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: 500px; height: 500px;}
#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: /prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: /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; }

 

Thanks.

[JasonLewis]

This line here:

 

#lightbox img{ width: 500px; height: 500px;}

 

Will make all images that appear inside the lightbox 500x500px. If this is what's happening, you can simply remove this line and it'll allow all sizes to be shown. Assuming your javascript is handling the lightbox properly by auto-resizing it according to the width/height of the image.

[emvy03]

Hi,

What is happening is the image will be displayed to those dimensions, however there is alot of white space created surrounding the image. Do you have any ideas as to what could be causing this?

Ta