Lightbox image viewer 2.03a automatically resize to window?

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