試圖顯示pdf內fancybox

我試圖用fancybox來顯示pdf的，但我沒有成功做到這一點。試圖顯示pdf內fancybox

我已經使用fancybox來顯示div的內容，但現在我正嘗試使用幻想也顯示一個PDF裏面。

我試圖打開一個pdf文件，我保存在我的電腦上，就像我用fancybox顯示內容的方式一樣，但不能用pdf工作。

我在我的HTML與href="#show"指向我<div id="show">一些鏈接，而這個鏈接也有class="buttonl"，那就是我在jQuery腳本用來打開的fancybox類。

喜歡這裏：<a href="#show" class="buttonl" >Title of my first post</a><br />

有人有已經使用的fancybox來顯示PDF格式可以給我一些幫助嗎？

我與代碼小提琴：

http://jsfiddle.net/ritz/WAKdB/1/

我的jQuery：

$(document).ready(function() { 
    $("a.buttonl").fancybox({ 
     maxWidth : 800, 
     fitToView : false, 
     width  : '70%', 
     height  : '70%', 
     autoSize : false, 
     closeClick : false, 
     openEffect : 'elastic', 
     closeEffect : 'elastic' 


    }); 
})

我的HTML：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<article id="loop-news"> 
    <h2> 
    <a href="#show" class="buttonl" >Title of my first post</a><br /> 
    </h2> 
    <span>Tuesday<strong>,</strong> 8 April 2014</span> 
    <p>My first post content is this!</p> 
    <a class="buttonl" href="#show"> Read more</a> 

    <div id="show"> 
     <h2>IM the fancybox content!!</h2> 
    </div> 
</article> 

<hr> 

<article id="loop-news"> 
    <h2> 
    <a href="#show" class="x">Post with pdf</a><br /> 
    </h2> 
    <span>Tuesday<strong>,</strong> 8 April 2014</span> 
    <p>My first post with pdf!</p> 
    <a class="buttonl" href="#show"> Read more</a> 

    <div id="show"> 
     <a href="../design_multimedia_method.pdf"></a> 
    </div> 
</article>

來源

2014-04-09 OzzC

你必須o把它作爲iframe，從http://fancyapps.com/fancybox/#examples No.15 – JFK

檢查http://jsfiddle.net/RHaAX/那麼，被引用的文檔被移動了，但試試這個http：// jsfiddle.net/SQSFp/ – JFK

謝謝你的回答，但是我不能在我的本地機器上安裝pdf嗎？我需要在服務器上託管我的pdf嗎？ – OzzC

是否有可能只有一個fancybox腳本允許顯示pdf和div的內容？

是的，你可能需要配置你的HTML這樣的：

<a class="buttonl" data-fancybox-type="iframe" href="document.pdf">Open pdf</a> 
<a class="buttonl" href="#inline">open inline content</a> 

<div id="inline" style="display:none"> 
    <p>Lorem Ipsum</p> 
</div>

注意我們已經建立一個data-fancybox-type屬性來打開PDF文檔的鏈接，這樣的fancybox會知道如何對付它

然後你可以使用一個腳本這兩種類型的內容

jQuery(document).ready(function ($) { 
    $("a.buttonl").fancybox({ 
     maxWidth: 800, 
     fitToView: false, 
     width: '70%', 
     height: '70%', 
     autoSize: false, 
     closeClick: false, 
     openEffect: 'elastic', 
     closeEffect: 'elastic', 
     afterLoad: function() { 
      if (this.type == "iframe") { 
       $.extend(this, { 
        iframe: { 
         preload: false 
        } 
       }); 
      } 
     } 
    }); 
});

注意該選項iframe preload只適用IF的content的type是IFRAME（由data-fancybox-type在我們的鏈接設置）

JSFIDDLE

來源

2014-04-10 06:21:46 JFK

感謝您的回答，但我不理解PDF沒有正確加載！ – OzzC

@CesarM：意思？有時候瀏覽器會使用自己的pdf預覽，所以它看起來可能不如使用Adobe reader。嘗試同時升級您的Adobe Reader插件 – JFK

我已經嵌入了腳本，它在桌面上工作，但在移動設備和平板電腦中出現問題... – SaurabhLP

入住這http://jsfiddle.net/zqJFp/

<a class="fancybox" href="http://samplepdf.com/sample.pdf">Open pdf</a> 
    $(".fancybox").fancybox({ 
     width : 600, 
     height : 300, 
     type :'iframe' 
    });

來源

2016-12-20 07:36:23

試圖顯示pdf內fancybox

回答

相關問題