试图显示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

回答

相关问题