In this post, I will show you how to add a nice print button to the fancybox jquery plugin. Of course like many of the posts I write, the idea came about from one of our clients who wanted to be able to have their users open the lightbox, show the coupon or whatever promotion they are doing and give the user the option to print said promotion.
Click here to view to working demo or go ahead and download the zip file.
To begin, there were a couple of things that we had to do. First, we needed to download the fancybox jQuery plugin. At this point I am assuming you have jQuery javascript file downloaded, if you dont, go get it at jQuery.com
The Breakdown
The javascript required is 3 main pieces. The fancybox plugin, the jquery file and the third piece that handles the printing functionality.
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.2.1.pack.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".promo").fancybox(); }); </script>
<script type="text/javascript"> var win=null; function printIt(printThis) { win = window.open(); self.focus(); win.document.open(); win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>'); win.document.write('body, td { font-family: Verdana; font-size: 10pt;}'); win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>'); win.document.write(printThis); win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>'); win.document.close(); win.print(); win.close(); } </script>
If you are familiar with the fancybox plugin, this is not too far fetched. basically what I added was the “print” image to the plugin itself as well as added some css too to position the image where I wanted it to appear.
FULL HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Print with Fancybox</title>
<link rel="stylesheet" media="all" type="text/css" href="fancybox.css" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".promo").fancybox();
});
</script>
</head>
<body>
<a class='promo' href="img/thatagency-full.jpg"><img src="img/thatagency-tile.jpg" alt="THAT Agency - West Palm Beach" border="0" /></a>
<script type="text/javascript">
var win=null;
function printIt(printThis)
{
win = window.open();
self.focus();
win.document.open();
win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
win.document.write(printThis);
win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
win.document.close();
win.print();
win.close();
}
</script>
</body>
</html>Click here to view to working demo or go ahead and download the zip file.
Tags: jQuery, jQuery examples, jQuery tutorial
Comment By: Patty
April 11th, 2010 at 12:28 pm
I wanted to use this for text rather than a photo. Basically, I have a text link on the main page, you click on it, and it opens and html page of text. However, when I try to print, I get a blank page instead of the text I want to print. How can I make it so this can print an html page of text? It’s just a small amount of text that fits inside the current popup/modal box. Thanks
Comment By: rudy
April 19th, 2010 at 2:38 pm
This works great for single images, but I need to use this on a gallery.
The problem I’m having is that the printIt function will run multiple times, depending on how may images I look at.
For example, if I view 6 images in the gallery, then choose to print that 6th one, I’ll get 6 print dialouges.
Is there some way of clearing the cache or something before the function runs?
Thanks!
Comment By: Rich
April 19th, 2010 at 5:54 pm
Hey Rudy. really good question. I looked into it a little further. I added three images now in the example and tried to print one individually and it worked. I tested it on FF, IE7 and IE8. what are you using? is there a demo I can see?
Comment By: paul
May 6th, 2010 at 2:43 pm
Hi, great code, I am definitely going to use it. But I had the same problem with a gallery. I am on a mac, and tested it on FF and Safari. The only thing I changed was to add two more instances of the image and link them as a gallery with the rel tag.
Comment By: Erin
May 11th, 2010 at 3:11 pm
Hi Rich,
I’m facing the same problem over here. The content of the fancy box disappears and then the next image in the gallery takes its place.
I’m on a Mac, and this was tested on FF, Safari and Chrome. Awesome idea, but too bad I can’t work out the kinks.
Comment By: Erin
May 11th, 2010 at 3:27 pm
It looks like the issue is caused by using Fancybox 1.3+ as opposed to 1.2.1. I managed to get it working in 1.3.1. The content just opens in a new window.
jQuery(function($) {
$('a#fancy_print').click(function(){
var image = window.open('','DownloadImage','width=600,height=600');
var html = 'Download Image' + $('').append($('#fancybox-inner').clone()).html() + '';
image.document.open();
image.document.write(html);
image.document.close();
return false;
}); });
Comment By: ap02
July 28th, 2010 at 9:15 am
hello,
it was so great,
but how can it work also in IE6?…it comes an error and content couldn’t be print
Cheer!(:
Comment By: Jansen Tolle
August 5th, 2010 at 11:02 am
Exactly what I was looking for. One of our clients needed something that allows visitors to print their coupons and this is perfect.
I actually tried “hacking” something like this together myself but there were issues in IE and it didn’t turn out as nice as your solution.
Comment By: cili
August 18th, 2010 at 4:56 am
When having images and text, the images are not shown in Safari. In FF works perfectly.
Any ideas?
Thanks.
Comment By: Austin
September 28th, 2010 at 7:57 pm
Has this been updated for v1.3.1? Specifically, I would like to pass inline HTML (a div with a couple images and some text) through to the fancybox and then print the whole thing, but this version doesn’t render it properly.
What comes out is a box that is the wrong size with the wrong background color.
Upon clicking the print button, the information DOES render properly, but four print dialogs pop up all at once…
Comment By: Matt
June 17th, 2011 at 11:43 am
Just what I was looking for. Thanks so much Rich!
Comment By: Atul Singhal
August 17th, 2011 at 6:00 am
how to put print div in js and css in jquery.fancybox-1.3.4.js
please send me option thanks.
Comment By: Ardenvis
September 15th, 2011 at 6:55 am
I’ve the same problems using fancybox 1.2.1:
the printIt function will run multiple times, depending on how may images I look at.
Nobody has been able to implement printing in version 1.3.4?
Comment By: Russ Miller
September 19th, 2011 at 3:09 pm
I added the following to the print stylesheet to allow it to work:
body * {
visibility: hidden;
}
#fancybox-content * {
visibility: visible;
}
#fancybox-content {
position: absolute;
top: 1px;
left: 1px;
}
#fancybox-frame {
width: 1100px;
height: 1450px;
display: block;
}
Comment By: Jon
October 16th, 2011 at 11:15 pm
Thank you!…Works great! I created a special page to display coupons and let the user select and print individual coupons.I got the following issue: Chrome: Print Preview Failed. Any ideas? (◉_◉)
Comment By: Russ Miller
October 24th, 2011 at 3:16 pm
Do you have a link that you can post for review?
Comment By: rich
November 3rd, 2011 at 12:28 pm
Hey Russ, yes the links for the demo are above. Or are you looking for some other link?
Comment By: David
January 26th, 2012 at 4:25 am
Any chance you’ve gotten this to work with fancybox for wordpress? I’ve spent 2 days trying to incorporate this with my mediocre coding skills and can’t seem to make it work….
Any help anyone???
Comment By: Rich
January 26th, 2012 at 10:37 am
hey @David
What exactly is is doing right now? do you have a demo to look at online? maybe its something really small that needs to be changed and you would be all set.
Comment By: Any
February 6th, 2012 at 1:58 am
How can I print Fancybox iFrame T_T Please help!!