Fancybox - Add Print Feature

, , ( , , ?), @JamWaffles, " ", . , ( ) .

, , , onComplete fancybox API css :

css "print" ( #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;
}

fancybox js:

$(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

( .bind()) onComplete.

: Fancybox v1.3.4 (fancybox v2.x API)

# 1. fancybox v2.x

№ 2 (15 2013 .): , fancybox, fancybox.

fancybox 2 (v2.1.5 ) :

$(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

.on() click . notice, afterShow, index , .

: .on() jQuery v1.7 +

. http://www.picssel.com/playground/jquery/addPrintButtonV2_14jul13.html