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

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?

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.

Quote:

---

Originally Posted by 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.

---

sure, that'd be great!

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

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?

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

Hi again, and thanks for your quick response.

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

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.

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,

thanks for all your helpful postings and mods to lightbox. The resize image code is perfect and works well!

I am hoping to include a print image feature as well within lightbox, but since the code for the image resize is modified from the original lightbox.js, I'm hoping there is a way to integrate the following print button/image feature as found at:
http://www.sitepoint.com/forums/showthread.php?t=558191
(no disrespect intended for linking outside).

I'm not a coder, yet have no trouble implementing the mods.

Please let me know if there is a way to integrate the two.
Cheers!

The mod you link to in your post is for version 2.04 of Lightbox and is not compatible with version 2.03 or any of the mods for it.

The print stylesheet recommendations as amended later in that thread (to use position fixed) should work for most browsers in either version. But for compatibility with IE 6 use (also works with modern browsers):

Code:

---

* {
    display: none;
}
html, body, #lightbox, #outerImageContainer, #imageContainer, #lightboxImage {
    background: none;
    display: block;
    left: 0!important;
    margin: 0!important;
    padding: 0!important;
    position: absolute;
    top: 0!important;
}

---

The changes to the version 2.03 script should be (search for the unhighlighted, add the highlighted):

Create an image for the print-button, and add an image reference:

Code:

---

var fileBottomNavCloseImage = "images/closelabel.gif";
var fileBottomNavPrintImage = "images/printlabel.gif";

---

Then add a print-button next to the close-button in the Lightbox container and set its onclick:

Code:

---

                var objBottomNav = document.createElement("div");
                objBottomNav.setAttribute('id','bottomNav');
                objImageData.appendChild(objBottomNav);

                if(window.print){
                        var objBottomNavPrintLink = document.createElement("a");
                        objBottomNavPrintLink.setAttribute('id','bottomNavPrintLink');
                        objBottomNavPrintLink.setAttribute('href','#');
                        objBottomNavPrintLink.onclick = function() { print(); return false; }
                        objBottomNav.appendChild(objBottomNavPrintLink);
               
                        var objBottomNavPrintImage = document.createElement("img");
                        objBottomNavPrintImage.setAttribute('src', fileBottomNavPrintImage);
                        objBottomNavPrintLink.appendChild(objBottomNavPrintImage);
                }

                var objBottomNavCloseLink = document.createElement("a");
                objBottomNavCloseLink.setAttribute('id','bottomNavClose');
                objBottomNavCloseLink.setAttribute('href','#');
                objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
                objBottomNav.appendChild(objBottomNavCloseLink);
       
                var objBottomNavCloseImage = document.createElement("img");
                objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
                objBottomNavCloseLink.appendChild(objBottomNavCloseImage);

---

Some additional tweaks, particularly to the styles may be required. Like you may need to style the bottomNavPrintLink in lightbox.css (one possible way):

Code:

---

#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;        }
#imageData #bottomNavPrintLink{ width: 66px; float: right;  padding-bottom: 0.7em; padding-left: 0.7em;}

---

But it might work out fine without that, or you may choose different styles for it, to get it to line up and/or appear differently.

Don't use the lightbox.css stylesheet from version 2.04 with version 2.03. It won't work entirely right (mostly, just messes up some things some times) in 2.03.

Thanks John again :)

I have added the code as you have suggested/provided. It has created the print icon which prints the page.
I do however need the printing function to print the actual image file rather than the resized image as created by the lightbox resize function.

Is it possible to print the original image from the print button?

This is where the script is being used:
http://quadrahomes.com/madisoncrossing/floorplans.html
The floor plans have image maps which activate the lightbox script.

many thanks for your response
blip

Since, as appears to be the case, all of your images are 675 x 900, if so, you could just add this rule to your print stylesheet:

Code:

---

img {
width: 675px;
height: 900px;
}

---

If not, this works, though I'm not entirely happy with it.

Replace:

Code:

---

                        objBottomNavPrintLink.onclick = function() { print(); return false; }

---

with:

Code:

---

                        objBottomNavPrintLink.onclick = function() {
                                var im = document.getElementById('lightboxImage'), h = im.height, w = im.width;
                                im.style.display = 'none';
                                im.removeAttribute('height', 0);
                                im.removeAttribute('width', 0);
                                print();
                                setTimeout(function(){
                                        im.height = h;
                                        im.width = w;
                                        im.style.display = '';
                                }, 0);
                                return false;
                                }

---

And add the !important keyword to the print styles display: block; property/value pair:

Code:

---

* {
    display: none;
}
html, body, #lightbox, #outerImageContainer, #imageContainer, #lightboxImage {
    background: none;
    display: block!important;
    left: 0!important;
    margin: 0!important;
    padding: 0!important;
    position: absolute;
    top: 0!important;
}

---

The only problem is that we must make the image temporarily display none on the page. When I have more time, I'll see what else can be done.

Perfect!
In fact, I've only used the css code that you mentioned first - and it worked.
I will keep the other code in mind in the event that we start using images that are not standardized in size.
Thanks so VERY MUCH John
you are brilliant

One last question (I imagine)...

Is there a way that the "print" function can be an option that is set within the lightbox instance?

ie. if one doesn't want a particular picture to have the "print" option, yet is within the lightbox collection of images, can one set the "print" option to be hidden thus not displaying the print button?

Or, is it best to run different lightbox scripts that have different functions?

blip:)

John,
I utilized the javascript modification above and removed the css image size code. Works really well - and I do see what you mean by the display "none". But that's fine.
I have noticed though that in safari, when images are displayed that are not "resized" by the resize script, then printed, the actual image printed is very very tiny. The same image, if originally viewed and the script resizes the display image, prints the actual large image file (as found on the server). Strange... but I can't see why this is so.

Here's the page location:
http://www.quadrahomes.com/madisoncr...loorplans.html

Cheers,
blip

hi,

Thanks for the script.......

in lightbox_resize.js you have added code which displaying the dimension of the image(resized image).

in place of that how to display the dimension of the orginal image.

Would u plz help me out to add a download button(to download original image) to lightbox image viewer