Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Lightbox image viewer 2.03a automatically resize to window?

  1. #1
    Join Date
    May 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Lightbox image viewer 2.03a load on top of frames?

    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?

  2. #2
    Join Date
    May 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Lightbox image viewer 2.03a automatically resize to window?

    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?

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    May 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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!

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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
    Last edited by jscheuer1; 06-30-2008 at 04:04 PM. Reason: remove flawed attachment
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Mar 2007
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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?

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    		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:

    Code:
    		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
    Last edited by jscheuer1; 07-01-2008 at 06:14 AM. Reason: add info and archive, and later correct typo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    kayj (07-01-2008)

  9. #8
    Join Date
    Mar 2007
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hi again, and thanks for your quick response.

    It now works!!! I will keep testing, but it seems to work on all my pictures.
    Last edited by kayj; 07-01-2008 at 05:34 AM.

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. The Following User Says Thank You to jscheuer1 For This Useful Post:

    kayj (07-03-2008)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •