Add print ability to fancybox jquery plugin

06 April

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.

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

<title>Print with Fancybox</title>

$(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();
}

  Contact Digital Marketing Specialist

TAGS: Web Development, General