Lightbox image viewer 2.03a automatically resize to window?

[chiba151]

1) Script Title:
Lightbox image viewer 2.03a

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem: I am using the lightbox viewer in a website with frames. Is there a way to get the image viewer to display on top of all frames rather than just the frame it is in?

[chiba151]

1) Script Title:
Lightbox image viewer 2.03a

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem: Is it possible for the image viewer to automatically load to the size of the window it is in?

[jscheuer1]

http://dolem.com/lytebox/

can work inside an iframe and possibly be adapted to work in a frame.

Frames and iframes are generally a bad idea though.

I was able to alter the original lightbox 2.03 to adapt its display to the window size, but it will not work in Safari. To work around that, I made it so that Safari would skip the extra code and still just use the image size as the only criteria for sizing the lightbox. If you are interested in that modification, let me know.

[chiba151]

http://dolem.com/lytebox/

can work inside an iframe and possibly be adapted to work in a frame.

Frames and iframes are generally a bad idea though.

I was able to alter the original lightbox 2.03 to adapt its display to the window size, but it will not work in Safari. To work around that, I made it so that Safari would skip the extra code and still just use the image size as the only criteria for sizing the lightbox. If you are interested in that modification, let me know.

sure, that'd be great!

[jscheuer1]

Just use the script inside this (attached) archive in place of lightbox.js. Use all the other files from the lightbox 2.03a distribution. You will have to change the external script tag on your page to reflect the new script name, or rename lightbox_resize_working.js to lightbox.js

attachment removed - too many errors - see later post for corrected archive

[kayj]

Are you sure this resize function works properly?

In my web page it works with some picture but not on all.

Ex: I have a picture that is 1609x1025 and that picture is resized but it still goes out of screen. Any idea why?

[jscheuer1]

OK, I'm going to remove the archive from my previous post and put the corrected one here.

To answer your question, no, actually I am sure it does not, at least not in all cases. My logic was faulty. First I checked to see if the width was out of whack. If it was, I went with that as the limiting factor. Next, only if the width wasn't out of whack, I checked the height, etc - same thing, if it was, I based the limit on height. Finally, only if the width and height were not out of whack, did I check to see if they were both out of whack. Obviously, it never got that far, and even if it did, my way of choosing which limiting factor to go with in that case was flawed as well.

Here is the working code for testing, if you want to just paste it in -

In short, replace this (highlighted):

		var bob=function(){
		var plim=null;
		if(getPageSize()[2]-50<=imgPreloader.width&&getPageSize()[3]-150>imgPreloader.height)
		plim='width';
		else if(getPageSize()[3]-150<=imgPreloader.height&&getPageSize()[2]-50>imgPreloader.width)
		plim='height';
		else if(getPageSize()[3]-150<=imgPreloader.height&&getPageSize()[2]-50<=imgPreloader.width)
		plim=imgPreloader.height-getPageSize()[3]-150>imgPreloader.width-getPageSize()[2]-50? 'height' : 'width';
		if(/Apple/.test(navigator.vendor)) plim=null;
			Element.setSrc('lightboxImage', imageArray[activeImage][0]);
			if(plim=='width'||plim==null)
			imgPreloader.width=$('lightboxImage').width=Math.min(getPageSize()[2]-50, imgPreloader.width);
			else imgPreloader.height=$('lightboxImage').height=Math.min(getPageSize()[3]-150, imgPreloader.height);
/*mark1*/			$('lightboxImage').style.visibity='hidden'
			var tempd=$('lightboxImage').style.display
			$('lightboxImage').style.display=''
			if(plim=='width'||plim==null)
			imgPreloader.height=$('lightboxImage').height=Math.min($('lightboxImage').height, imgPreloader.height);
			else imgPreloader.width=$('lightboxImage').width=Math.min($('lightboxImage').width, imgPreloader.width);
			$('lightboxImage').style.display=tempd;
			$('lightboxImage').style.visibity='visible'
			myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
			
			imgPreloader.onload=function(){};	//	clear onLoad, IE behaves irratically with animated gifs otherwise 
		}

with:

		if(getPageSize()[3]-150<=imgPreloader.height&&getPageSize()[2]-50<=imgPreloader.width)
		plim=imgPreloader.height/(getPageSize()[3]-150)>=imgPreloader.width/(getPageSize()[2]-50)? 'height' : 'width';
		else if(getPageSize()[3]-150<=imgPreloader.height)
		plim='height';
		else if(getPageSize()[2]-50<=imgPreloader.width)
		plim='width';

Here is the updated archive:

Attachment 1875

[kayj]

Hi again, and thanks for your quick response.

It now works!!! I will keep testing, but it seems to work on all my pictures.

[jscheuer1]

Well it still doesn't work for Safari. I've been playing around with that, and I think I am close to a satisfactory solution. I'll post it here when I have it ironed out.

[jscheuer1]

This is now the 'official' release of this mod. It has its own updated lightbox_resize.js and lightbox_r.css files which should be used in place of the lightbox.js and lightbox.css files, but otherwise uses all of the same resources as DD's v2.03a version of this script. I've added a configuration option in lightbox_resize.js:

var show_dimensions_in_caption = true;	// toggles display of dimensions in caption (requires title/caption for a given lightbox link)

which should be pretty self explanatory. I also changed the way it deals with the 'clearfix' issue by actually adding a clearing element, but if you use the updated css and script, that will be automatic.

Here's a demo:

http://home.comcast.net/~jscheuer1/s...ex_resize.html

Here are the updated files:

http://home.comcast.net/~jscheuer1/s...box_resize.zip