Hi,
I was wondering if any has done or know examples of a lightbox 2 script with print options?
I can’t think of any examples with a print option, but you should be able to add that funcationality yourself.
First create a stylesheet for media=print where you hide all elements, and add a rule to the bottom of the stylesheet to display the Lightbox image:
* {
display: none;
}
html, body, #lightbox, #outerImageContainer, #imageContainer, #lightboxImage {
background: none;
display: block;
left: 0px;
margin: 0px;
padding: 0px;
position: relative;
top: 0px;
}
Add the stylesheet in the HTML of your page:
<head>
...
<link media="print" type="text/css" href="print-lightbox.css" rel="stylesheet">
...
</head>
Create an image for the print-button, and add an image reference:
...
fileBottomNavCloseImage: 'images/closelabel.gif', // Search for this line
fileBottomNavPrintImage: 'images/printlabel.gif', // And add this line
...
Then add a print-button next to the close-button in the Lightbox container.
To do so, replace the following:
Builder.node('div',{id:'bottomNav'},
Builder.node('a',{id:'bottomNavClose', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
)
)
With:
Builder.node('div',{id:'bottomNav'}, [
Builder.node('a',{id:'bottomNavPrint', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavPrintImage })
),
Builder.node('a',{id:'bottomNavClose', href: '#' },
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
)
])
Next, bind an onclick-event to the print-button you’ve just added:
...
$('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this)); // Search for this line
$('bottomNavPrint').observe('click', (function(event) { event.stop(); window.print() }).bind(this)); // And add this line
...
And voila, we’re done…
Excellent, thorough directions 
One issue, I am not able to get the image to print? I thought maybe specificity was the issue and removed the commas from the print sheet, but that didn’t help either.
I’ve got an example of lightbox with a print button up and running on http://sandbox.tse-webdesign.be/lightbox-print/
You can download it from: http://sandbox.tse-webdesign.be/lightbox-print/lightbox-print.zip
Hope that helps ;o)
hmmmm…can’t seem to figure it out, still print a blank page. Here it is on our staging server (link removed), ‘load table’ list has the lightbox feature
Apparently I forgot that the container surrounding the lightbox image has an inline style property set for the top and left offset.
But, good news, you can just modify the stylesheet to make it work properly.
Change this:
html, body, #lightbox, #outerImageContainer, #imageContainer, #lightboxImage {
...
position: relative;
...
}
To:
html, body, #lightbox, #outerImageContainer, #imageContainer, #lightboxImage {
...
position: fixed;
...
}
Excellent, the whole script is very clever! :tup: Learned a lot
Not sure if this can be done or not, but is there a way of dynamically setting the print style for the lightbox versus the entire page. The only reason I was thinking this is if someone wants to print the entire page?
Ok, that’s something I could have guessed :o)
I’ve renamed the stylesheet css/print.css to css/lightbox-print.css in this example.
Replace:
$('bottomNavPrint').observe('click', (function(event) { event.stop(); window.print(); }).bind(this));
With:
$('bottomNavPrint').observe('click', (function(event) {
event.stop();
var objHead = $$('head')[0];
objHead.appendChild(Builder.node('link',{id:'lightboxPrintSheet',media:'print', type:'text/css', href:'css/lightbox-print.css',rel:'stylesheet'}));
window.print();
setTimeout("$$('head')[0].removeChild($('lightboxPrintSheet'))", 2000);
}).bind(this));
When clicking the print button in Lightbox, a stylesheet for media=print is added, and should override previous stylesheets for printing.
After two seconds (the print dialog needs time to load, I figured 2 seconds is enough time), the stylesheet is removed again.
This way you can still print the entire webpage.
Note: The ZIP-file and the online example have been updated.
Awesome, Thanks for all the help 
Hey hexburner,
This is a great script however it doesn’t seem to work in IE6 on the PC or Safari on the Mac (IE7 on the PC and FF on the Mac work great). Printing from the page works, but you get a blank page when printing the lightbox.
Any thoughts on how to make it work cross-browser and cross-platform?
Thanks!
As a follow up, my laptop that still has IE 6 on it printed the lightbox with no issues, other than printing a page for the lightbox and a separate page for the web page the lightbox is located.
Also checked Safari 3.2.2 and it printed the content of the lightbox just fine, no issues, and only the lightbox contents.
I further checked K-meleon browser and prints out fine no issues, just lightbox content.
And of course I checked Firefox 3.0.7 and no issues, the same for IE7.
hey,
this is really great script but it seems not working IE(no lightbox seen only an image on the white page) 
in FF its great.
but help me on this so, that it works in IE also
Same issues with IE6 and FF, anyone have a solution?!?
First, thank you for this useful post, I know, it’s a little bit old.
The print option works great on all the browsers except one… Google Chrome.
Is there any way to make it compatible with this browser too.
Thank you for your time.
Jeremie
I got this to work by making the div large enough to cover everything and setting its background color to white. This is the style rules for the div I want to print.
@media print{
div#iwannaprint {
background:white;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;}
}
I can not get this script to print the title for the image.
Could you take a look and see what the problem might be.
The site is at ourhousedesigns dot com
Hi, You seem I have a picture that is 650*600, but when i bring out the image the image covers the entire container, How do i increase the container. i’ve tried everything I know.
thank you
I know this thread is a blast from the past but I wanted to thank hexburner - script works well.
Any way to print the caption along with the photo?