Lightbox Print Help

1) Script Title: Lightbox image viewer 2.03

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

3) Describe problem: I am having a problem with the print feature that I have added to my lightbox. The print button works but it prints the whole page as opposed to just the image in the lightbox.

Here is the code that I used:
rel="lightbox" title="Caption <a href='javascript: window.print();' > Print </a>"

How can I have it just print the image instead of the whole page?

Thanks in advance,

Eric

See:

http://www.dynamicdrive.com/forums/s...28&postcount=3

For a slightly different result, one that I prefer, you can use this print stylesheet (see http://www.dynamicdrive.com/forums/s...28&postcount=3 for info on using the print stylesheet):

Code:

---

body * {
display:none;
text-align:center;
margin:0 auto;
position:static;
}
#lightbox, #outerImageContainer,
#imageContainer, #lightboxImage,
#imageDataContainer, #imageData,
#imageDetails, #imageDetails * {
display:block!important;
opacity:1.0!important;
}

---

and modify lightbox.js here (additions highlighted):

Code:

---

                var objLightboxImage = document.createElement("img");
                objLightboxImage.setAttribute('id','lightboxImage');
                objLightboxImage.setAttribute('alt','No Image Loaded/Selected');
                objLightboxImage.setAttribute('title','');
                objImageContainer.appendChild(objLightboxImage);

---

I'll need this stylesheet info when I get there (so thanks), but right now I'm not understanding how to add the print link in the first place. Thanks for any help.:)

A print link on a page may be created like so:

HTML Code:

---

<a href="javascript:print();" onclick="if(window.print)window.print();return false;">Print</a>

---

Or the user can just use their browser's print button or file menu to print the page. If you are using lightbox v2.03a:

http://www.dynamicdrive.com/dynamici...box2/index.htm

You can have a print link right on the lightbox image by using a trigger like so for the lightbox:

HTML Code:

---

<a href="images/image-1.jpg" rel="lightbox"
title="Print" rev="javascript:print();"><span title="Image 1">image #1</span></a>

---

Just for your information, the normal trigger with no link or print link for the lightbox looks like so:

HTML Code:

---

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

---

Thanks John

I guess why I don't understand what you mean by that is because the code for lightbox v2.03a as displayed on this website is not in that format.

It looks more like:

Code:

---

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

---

And then it defines the variables and such in other sections. I'm guessing I could take that and format it to be used to create the print button? Any ideas? Thanks for your help.

Huh? This is a direct quote from the demo page:

Quote:

---

Code:

---

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

---

---

I'm not talking about editing the script. I'm talking about modifying the HTML code used to trigger the lightbox.

In other words, I think you are over complicating this.

Ah, sorry, that's my problem. I'm trying to use this in conjunction with a CMS (it's already adjusted with dynamic scripts) and so the files I must modify are either the original javascript or the php coding. :(

Alright, I've gotten as far as inserting the print button and it bringing up the print dialogue box and printing the whole page. So I implement the css solution provided here.

But when I do that it prints nothing. Strangely enough at one point it printed half of the image at the bottom of the page, but for the life of me I can't even get it to do that again. Not sure what it was.

Here is the code I used in lightbox.js itself:

Code:

---

var objPrintLink = document.createElement("a");
objPrintLink.setAttribute('href', '#');
objPrintLink.setAttribute('id', 'printLink');
objPrintLink.onclick = function(){window.print(); return false; }
objImageData.appendChild(objPrintLink);

var objPrintIcon = document.createElement("img");
objPrintIcon.setAttribute('src', printIcon);
objPrintIcon.setAttribute('title', 'Print');
objPrintIcon.setAttribute('alt', 'Print');
objPrintLink.appendChild(objPrintIcon);

---

And then:

Code:

---

Element.setHref('printLink', imageArray[activeImage][0]);

---

inserted around line 452 with the "Element.hide" grouping.

This part get's the url to each image correct and so works dynamically. Now if I can just get the picture to print.

You should enclose your added code in a conditional that determines if the browser can do window.print():

Code:

---

if(window.print){
var objPrintLink = document.createElement("a");
objPrintLink.setAttribute('href', '#');
objPrintLink.setAttribute('id', 'printLink');
objPrintLink.onclick = function(){window.print(); return false; }
objImageData.appendChild(objPrintLink);

var objPrintIcon = document.createElement("img");
objPrintIcon.setAttribute('src', printIcon);
objPrintIcon.setAttribute('title', 'Print');
objPrintIcon.setAttribute('alt', 'Print');
objPrintLink.appendChild(objPrintIcon);
}

---

This has nothing to do with your problem, but it will avoid confusion for users whose browser - for whatever reason cannot print using window.print().

I don't see how this:

Code:

---

Element.setHref('printLink', imageArray[activeImage][0]);

---

is required at all, but it probably won't hurt anything. The href will never fire. If it did, you would no longer be looking at the page, the image would load by itself into the window.

As to your problem, a link to your page would probably help in diagnosing the issue:

Please post a link to the page on your site that contains the problematic code so we can check it out.

But, are you sure you copied the style exactly as shown earlier in this thread and included the media="print" descriptor for it? What browser are you using?

I got it! Thanks for your help.

I simply needed to set the css for the image containers as position:static; as well. Now it works great.