Fancybox - 添加打印功能

Question

是的，我知道这里存在关于如何将打印按钮添加到fancybox的问题。 我在fancybox (http://oi50.tinypic.com/2wfvn7r.jpg) 中添加了一个按钮，但我不知道如何添加一个这样实现的功能：http://www.thatagency.com/design-studio-blog/2010/04/add-print-ability-to-fancybox-jquery-plugin/

任何人都可以帮助并为此按钮编写函数吗？

不胜感激

我的代码：http://www.filehosting.org/file/details/360044/fancybox-print.zip

演示/MY.htm

Answer 1

我正要投票结束你的问题，但我知道找到解决问题的方法可能有点棘手（你不会问你是否知道，对吧？），但我同意 @ JamWaffles，你不应该要求人们“为我做这个”，而是展示你的代码并描述你的尝试。我想最合乎逻辑的是（至少）查看找到的任何示例的源文件。

无论如何，您可以使用onComplete fancybox 的API 选项和一些css 的打印按钮来实现example you provided 中的打印功能，如下所示：

设置“打印”按钮的css属性（将使用选择器#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。

DEMO file

注意：此解决方案适用于 Fancybox v1.3.4（fancybox v2.x 需要调整代码以获得正确的选择器和 API 选项）

EDIT #1：我评论了 fancybox v2.x 的选项和选择器

EDIT #2（2013 年 7 月 15 日）：上面的代码适用于 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 事件绑定到打印 按钮以供画廊中的未来元素使用。另外注意现在我们正在使用afterShow 回调来获取我们要打印的图像的正确index。

注意：.on() 需要 jQuery v1.7+

在http://www.picssel.com/playground/jquery/addPrintButtonV2_14jul13.html查看演示