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
