Fancybox - add print function [closed]

Question

Yes, I know that here exist questions about how add print button to fancybox. I added a button to fancybox (http://oi50.tinypic.com/2wfvn7r.jpg), but I don't know how add a function which will be implented like this: http://www.thatagency.com/design-studio-blog/2010/04/add-print-ability-to-fancybox-jquery-plugin/

can anyone help and write function for this button?

I'll be very grateful

MY code: http://www.filehosting.org/file/details/360044/fancybox-print.zip

demo / MY.htm

Orleanist

SO is not a place to ask "Do this for me" questions. Please post what you have written so far (if anything), or try writing this yourself then come back with any specific problems. – Bukavu

SO, I'm tried to write this function but it's doesn't work and I don't know where I should place this. – Aulos

Personally I really get annoyed at the number of questions that get closed inappropriately. – Committal

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('<div id="fancy_print"></div>'); // 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('<div id="fancy_print"></div>')
    // 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

Vernavernacular

Up vote. Your answer solved my problem (of how to add buttons to the FB frame) using FancyBox v2.x. (Glad you made your edits.) – Estes