Help with Lightbox Image Viewer Modification

[moscarda]

Script: Lightbox image viewer 2.03a
http://www.dynamicdrive.com/dynamici...box2/index.htm

Issue: Wondering if it would be possible to modify this image viewer so that (1) the entire screen doesnt dim, but instead a finite area specified with css positioning/coordinates, and (2) that the image viewer would load centered in this area.

[jscheuer1]

That, or something like that could probably be worked out. However, it would depend upon other factors. The way the overlay currently displays is as a percentage of the page width and height - 100%. This is calculated in the script, on the fly - because monitor and browser window dimensions will vary, and to allow for maximum potential image sizes still appearing within the overlay, while still fitting on the user's screen/in the user's window.

To do what you propose with images that might easily exceed 500x300 could pose practical issues on - say, 800x600 screen/windows - in actually fitting the image inside the overlay once you have reduced its dimensions - at least on these and similar smaller screens/windows.

What is the size of your largest image? If they are all under 500x300, this could work out, but the style for the overlay would probably still need to be determined on the fly in the script.

I'll give this some more thought though, in the meantime let me know the dimensions of your images.

[moscarda]

Well, I am building the site to fit 800x600 monitors. Page is center aligned with a horizontal header/nav bar on top, and below that is a rectangle 750x440 that holds my gallery. I would like to load images whose max dimensions would be lesser than that rectangle with the lightbox centered precisely over the rectangle to give user the impression that this is happening within the constrains of the gallery. Largest image is 700x419. The gallery rectangle is positioned 112px from the top, by the way.

[jscheuer1]

OK, I have given this some more thought as promised, and as it turns out most, if not all of this can be done in the lightbox.css file. For the overlay (now, this may need a little tweaking -additions/changes red):

#overlay{
	position: absolute;
	top: 112px!important;
	left: 50%!important;
	margin-left:-375px!important;
	z-index: 90;
	width: 750px!important;
	height: 440px!important;
	background-color: #000;
	}

The !important keyword overrides the on the fly settings performed by the script, and this should put the overlay where you want it, sized like you want it, or at least very close. The left:50% puts the left edge of the overlay in the exact center, then the negative left margin of half the width of the overlay brings the overlay itself to dead center. The top, width, and height settings are self-explanatory. That leaves the lightbox itself. If all of the images are of the same height, or if you want all of the images to appear at the same distance from the top, you can set that here (once again, a little tweaking may be needed):

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	top:127px!important;
	}

Otherwise the lightbox.js file would need to be edited. Play around with what I have put forth here, and I will look into possible modifications for lightbox.js if the top position of the lightbox needs to vary from image to image.