Lightbox2 positioning

[JPalm]

Lightbox 2 image viewer
http://www.dynamicdrive.com/dynamici...box2/index.htm
Hey folks.

I'm not happy where the lightbox2 "popup" is positioned on my page....but I'm not smart enough to figure out where in the script I need to tell it to be.

I'm sure the answer is simple enough, but I'm such a noob.

[Thaddeus]

Lightbox 2 Image Viewer:
http://www.dynamicdrive.com/dynamici...box2/index.htm

I have a similar question. When the large image loads it is almost centered. I would like it to set closer to the top. The reason is that when users running 1024x768 res. open an image that is 600pixels high or taller, the close button is cut off due to positioning of the image. I have tweaked darn near every setting in the CSS I can think of that would pull the positioning up, but with no luck.

Any help would be greatly appreciated. Sorry, I dont have it on a hosted page at the moment.

_thaddeus

[jscheuer1]

First of all, with lightbox 2, at least on my monitor, the pop up appears in the upper portion of the screen as compared to the original lightbox. But, I can see how with large images and lower res monitors, even this would not be enough room. However, one should balance one's natural desire for size with consideration of the various resolutions currently in use. 800x600 is still not that uncommon. A 600px high image won't fit on a screen like that unless there is absolutely nothing else but the image, no browser, no taskbar, etc. With all that in mind, I have found that the pop up positioning is most easily influenced in the css by adjusting this selector's property/value pairs:

#outerImageContainer

For example, to move it up, give it a negative top margin:

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	margin-top:-20px;
	}

Similarly, you could move it toward the upper left corner like so:

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: -20px auto 0 50px;
	}

But, whereas the:

#imageDataContainer

will follow it vertically, if it is moved horizontally, the #imageDataContainer must also be moved a similar amount:

#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto 0 50px;
	line-height: 1.4em;
	}

[Thaddeus]

PERFECT!!!! Thank you very much for your help.