Fancybox - 인쇄 기능 추가

Question

예, 여기서 팬시 박스에 인쇄 버튼을 추가하는 방법에 대한 질문이 있습니다.. 나는 fancybox (http://oi50.tinypic.com/2wfvn7r.jpg)에 버튼을 추가,하지만 난 이런 식으로 implented됩니다 기능을 추가하는 방법을 알고하지 않습니다 http://www.thatagency.com/design-studio-blog/2010/04/add-print-ability-to-fancybox-jquery-plugin/

수있는 사람의 도움을 쓰기 이 버튼의 기능은 무엇입니까?

나는 매우 감사하게 될 것입니다

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

데모/MY.htm

Answer 1

나는 귀하의 질문에 폐쇄 투표를하려고했지만, 난 그것을 조금 까다로운 일이 될 수 있음을 이해 그것을 할 수있는 방법을 찾으려면 (당신이 그것을 안다면 물어 보지 않겠습니까?) 그러나 @JamWaffles에 동의하십시오. "나를 위해이 일을"이라고 말하지 말고 코드를 보여 주어야합니다. 당신의 시도를 기술하십시오. 가장 논리적 인 부분은 발견 된 모든 예제의 소스 파일을 (최소한)보아야한다는 것입니다. 를 사용합니다 ("인쇄"버튼에 대한 CSS 속성을 설정

:

어쨌든, 당신은 onComplete fancybox의 API 옵션으로 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의 버전 2.x 적절한 선택기 및 API 옵션에 대한 코드를 조정할 필요) Fancybox의 v1.3.4입니다

편집 # 1 : fancybox v2.x에 대한 옵션 및 선택기에 대한 의견을 말했습니다.

EDIT # 2 (2013 년 7 월 15 일) : 위의 코드는 fancybox에 표시되는 단일 항목에 적합하지만 다음과 같은 경우 실패합니다. fancybox 갤러리를 사용합니다.

이

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

이 코드는 인쇄에 click 이벤트를 결합하기 위해 위임 된 형태로 .on() 방법을 사용하여 다음

는

fancybox 2 (오늘 같은 v2.1.5)에 대한 작동 코드와 이미지 갤러리입니다 갤러리의 미래 요소를위한 버튼. 또한 공지 이제 afterShow 콜백을 사용하여 인쇄 할 이미지의 올바른 index을 가져오고 있습니다.

: .on()에는 jQuery v1이 필요합니다.7+ http://www.picssel.com/playground/jquery/addPrintButtonV2_14jul13.html