Question

我试图使用fancybox来显示pdf，但我没有成功这样做。

我已经在使用fancybox来显示div内容了，但是现在我试图用fancy来显示内部的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>

Answer 1

是否可以只有一个允许show pdf和div内容的fancybox脚本？

是的，您可能需要配置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>

注意我们已经为打开pdf文档的链接设置了data-fancybox-type属性，因此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 type content iframe （由我们链接中的data-fancybox-type设置）

<强> JSFIDDLE

Answer 2

选中此http://jsfiddle.net/zqJFp/

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

试图在fancybox中显示pdf

2 个答案: