Fancybox - add print function [closed]

Answer 1

I was about to vote your question closed but I understand that it may be a little bit tricky to find the way to do it (you wouldn't ask if you know it, would you?), however I agree with @JamWaffles that you shouldn't ask people to "do this for me" but rather show your code and describe your attempts. I guess the most logical is (at least) to look at the source files of any example found.

Anyways, you can achieve the print functionality as in the example you provided with the onComplete fancybox's API option and some css for the print button like this :

Set the css properties for the "print" button (will use the selector #fancy_print) :

div#fancy_print {
  /* set proper path for your print image */
    background: url("images/print2.jpg") no-repeat scroll left top transparent;
    cursor: pointer;
    width: 58px; /* the size of your print image */
    height: 60px;
    left: -15px;
    position: absolute;
    top: -12px;
    z-index: 9999;
    display: block;
}

then the fancybox js code :

$(document).ready(function() {
 $('.fancybox').fancybox({
  'onComplete': function(){ // for v2.0.6+ use : 'beforeShow' 
    var win=null;
    var content = $('#fancybox-content'); // for v2.x use : var content = $('.fancybox-inner');
    $('#fancybox-outer').append('
'); // for v2.x use : $('.fancybox-wrap').append(...
    $('#fancy_print').bind("click", function(){
      win = window.open("width=200,height=200");
      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(content.html());
      win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
      win.document.close();
      win.print();
      win.close();
    }); // bind
  } //onComplete
 }); // fancybox
}); //  ready

You could place the print functionality (.bind() method) in a separated function and call it onComplete.

DEMO file

NOTE: this solution is for Fancybox v1.3.4 (fancybox v2.x would require to tweak the code for the proper selectors and API options)

EDIT #1 : I commented the options and selectors for fancybox v2.x

EDIT #2 (July 15, 2013) : The code above works fine for a single item displayed in fancybox but it fails if using a fancybox gallery.

Following is the working code for fancybox 2 (v2.1.5 as today) and an image gallery :

$(document).ready(function() {
 $('.fancybox').attr("rel","gallery").fancybox({
  afterShow: function(){
    var win=null;
    var content = $('.fancybox-inner');
    $('.fancybox-wrap')
    // append print button
    .append('
')
    // use .on() in its delegated form to bind a click to the print button event for future elements
    .on("click", "#fancy_print", function(){
      win = window.open("width=200,height=200");
      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(content.html());
      win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
      win.document.close();
      win.print();
      win.close();
    }); // on
  } //  afterShow
 }); // fancybox
}); //  ready

This code uses the .on() method in its delegated form to bind click events to the print button for future elements in the gallery. Also notice that now we are using the afterShow callback to get the correct index of the image we want to print.

NOTE : .on() requires jQuery v1.7+

See demo at http://www.picssel.com/playground/jquery/addPrintButtonV2_14jul13.html