• Please take a moment and tell us about your project, or give us a call at (888) 873-3281.
  • Write a short description of your business and services required

Add print ability to fancybox jquery plugin

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.




$(document).ready(function(){
	$(".promo").fancybox();
});


var win=null;
function printIt(printThis)
{
	win = window.open();
	self.focus();
	win.document.open();
	win.document.write('');
	win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
	win.document.write('');
	win.document.write(printThis);
	win.document.write('');
	win.document.close();
	win.print();
	win.close();
}

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










$(document).ready(function(){
	$(".promo").fancybox();
});



THAT Agency - West Palm Beach

var win=null;
function printIt(printThis)
{
	win = window.open();
	self.focus();
	win.document.open();
	win.document.write('');
	win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
	win.document.write('');
	win.document.write(printThis);
	win.document.write('');
	win.document.close();
	win.print();
	win.close();
}



Click here to view to working demo or go ahead and download the zip file.

Profile-Ronald-Busky

Ronald Busky  Ron's ability to express our client's message in a way that drives results is remarkable. We are firm believers in ROI, and it starts with the first paragraph! Ron's robust style and diverse portfolio has allowed him to write for clients ranging from car dealers to luxury hotels.

32 Comments

  1. Patty

    Reply

    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

  2. rudy

    Reply

    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!

  3. Rich

    Reply

    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?

  4. paul

    Reply

    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.

  5. Erin

    Reply

    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.

  6. Erin

    Reply

    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;

    }); });

  7. ap02

    Reply

    hello,
    it was so great,
    but how can it work also in IE6?…it comes an error and content couldn’t be print

    Cheer!(:

  8. Jansen Tolle

    Reply

    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.

  9. cili

    Reply

    When having images and text, the images are not shown in Safari. In FF works perfectly.

    Any ideas?

    Thanks.

  10. Austin

    Reply

    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…

  11. Matt

    Reply

    Just what I was looking for. Thanks so much Rich!

  12. Atul Singhal

    Reply

    how to put print div in js and css in jquery.fancybox-1.3.4.js
    please send me option thanks.

  13. Ardenvis

    Reply

    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?

  14. Russ Miller

    Reply

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

  15. Jon

    Reply

    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? (◉_◉)

  16. Russ Miller

    Reply

    Do you have a link that you can post for review?

  17. rich

    Reply

    Hey Russ, yes the links for the demo are above. Or are you looking for some other link?

  18. David

    Reply

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

  19. Rich

    Reply

    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.

  20. Any

    Reply

    How can I print Fancybox iFrame T_T Please help!!

  21. Greg

    Reply

    Thanks for this add-on for Fancybox. It’s just what I needed. But I’m having a problem with Chrome where the print preview is blank.

    Here’s a sample link of where I’m having the issue: http://dmaconnect.org/CONNECT/print/dmacon_egungun?id=5129712

    Click on any of the image thumbnails to bring up Fancybox. When you click the PRINT button in Chrome, Chrome displays an empty preview. It seems to be ok in IE9 and FireFox.

    I’m hoping this is an easy fix.

    Thanks.

  22. Rich

    Reply

    Hey @Greg the link you posted sends me to a page that looks like what “pops up” am i missing something?

  23. Alex

    Reply

    I am getting an error message:
    Uncaught TypeError: Cannot call method ‘appendChild’ of undefined
    == can someone help…

  24. Alex

    Reply

    I forgot to mention that the anchor links get built dynamically. When clicked on the picture, which is in .png format, I just get a full size picture in the browser window. On the console of chrome debugger it says:Uncaught TypeError: Cannot call method ‘appendChild’ of undefined
    == Any ideas Rich

  25. Greg

    Reply

    @Rich, using Chrome go to the link above and click on any of the smaller thumbnails. Fancybox will open with the Print option at the top. When I click on the Print option (in Chrome) the print preview just shows a blank page.

  26. diogenes

    Reply

    now that fancybox has become fancy app this will no longer work?
    have you to the new system???
    thanks for your good work.
    Cheers to all.

  27. Jayne Nicholson

    Reply

    This is an easier way.
    CSS

    @media print
    {
    body * { visibility: hidden; }
    #fancybox-content * { visibility: visible; }
    #fancybox-content {position:fixed; top: 5px; left: 5px; }
    }

    #external-link {
    position: absolute;
    top: -12px;
    left: -15px;
    height: 32px;
    width: 85px;
    background: url(‘/images/print.png’) top left no-repeat;
    cursor: pointer;
    z-index: 1103;
    }

    Then add this to .fancybox

    onComplete: function(){
    link = ‘‘; $(‘#fancybox-close’).before(link);
    }

  28. Jayne Nicholson

    Reply

    Sorry missed little code:

    This is an easier way.
    CSS

    @media print
    {
    body * { visibility: hidden; }
    #fancybox-content * { visibility: visible; }
    #fancybox-content {position:fixed; top: 5px; left: 5px; }
    }

    #external-link {
    position: absolute;
    top: -12px;
    left: -15px;
    height: 32px;
    width: 85px;
    background: url(‘/images/print.png’) top left no-repeat;
    cursor: pointer;
    z-index: 1103;
    }

    Then add this to .fancybox

    onComplete: function(){ link = ‘‘; $(‘#fancybox-close’).before(link); }

  29. Watt

    Reply

    This is exactly what I needed… but has anyone solved the problem of multiple windows opening? If I click the print button from the first image, only one window opens, but if I click it from subsequent images in a gallery, multiple images open. Would really love to solve this!

  30. Nick

    Reply

    I saw someone else asked about incorporating this with wordpress but they never followed up…so my question is how to get this to work with wordpress? I’ve installed the plugin Fancybox for WordPress and then tried using the html code in the file. But I then realized all the extra images that are needed so of course it didn’t work. Would really appreciate a solution! Thanks!

  31. Rodrigo

    Reply

    Why does IE9 indicate Access Denied to the press button Print?
    With Chrome and Mozilla runs good.

    Help me!!. Please

  32. Rodrigo

    Reply

    Hi!!!
    I have a problem with IE. It doesn’t send the print.
    I don’t find the problem.
    Thanks.

Leave a Comment

Your email address will never be published or shared. Required fields are marked with an asterisk (*).