pdf.jsをファンシーボックスに埋め込む方法

ファンシーボックスは素晴らしいですが、サポート、ルックアンドフィールはOS、ブラウザ、およびAdobeインストールによって異なるため、デフォルトのPDF実装はうまく機能しません。 PDF.jsは、PDFの解析とレンダリングにWeb標準ベースのプラットフォームを使用して解決します。 fancyboxの中にpdf.jsビューアを埋め込む方法は？pdf.jsをファンシーボックスに埋め込む方法

出典

2016-10-27 David

私の解決方法は、pdf.jsをfancyboxと一緒に使う方法です。それは自動的に&ブラウザの表示サイズに動的に拡大し、いいようにx - ブラウザ（私が試したもの）、動作します！しかし、ブラウザ間で正確なローディング動作が少し異なることがあります。

あなたはjqueryの、fancyboxとpdf.jsを含める必要があります。

PDFを埋め込みたい場合。代わりに静的div内のjsファンシーボックス、見てくださいhttps://pdfobject.com/

<html> 
<head> 
    <!-- Add jQuery library --> 
    <script type="text/javascript" src="./includes/js/jquery-3.1.1.min.js"></script> 
    <!-- Add fancyBox main JS and CSS files --> 
    <script type="text/javascript" src="./includes/js/fancybox/jquery.fancybox.js?v=2.1.5"></script> 
    <link rel="stylesheet" type="text/css" href="./includes/js/fancybox/jquery.fancybox.css?v=2.1.5" media="screen" /> 
    <script type="text/javascript"> 
     var pdfOpenParams = "#page=1&pagemode=none"; //pagemode=none,bookmarks,thumbs 

     $(document).ready(function() { 
      //Fancybox settings 
      $(".fancybox-pdf").fancybox({ 
       type: 'iframe', 
       padding: 0, 
       openEffect: 'fade', 
       openSpeed: 150, 
       closeEffect: 'fade', 
       closeSpeed: 150, 
       closeClick: true, 
       width: '60%', 
       height: '100%', 
       maxWidth: '100%', 
       maxHeight: '100%', 
       iframe: { 
        preload: false 
       }, 
       //Define PDF.js viewer with optional parameters 
       beforeLoad: function() { 
        var url = $(this.element).attr("href"); 
        this.href = "./includes/js/pdfjs/web/viewer.html?file=" + url + pdfOpenParams; 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <a class="fancybox-pdf" href="http://localhost/pdf/pdf-sample.pdf">View PDF</a> 
</body> 
</html>

出典

2016-10-27 07:30:59 David

pdf.jsをファンシーボックスに埋め込む方法

答えて

関連する問題