试图在fancybox中显示pdf答案

【问题标题】：Trying to show pdf inside fancybox试图在fancybox中显示pdf
【发布时间】：2014-04-09 02:52:20
【问题描述】：

我正在尝试使用 fancybox 来显示 pdf，但我没有成功。

我已经在使用 fancybox 来显示一个 div 内容，但现在我也在尝试使用 fancybox 在里面显示一个 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>

【问题讨论】：

你必须以iframe打开它，检查jsfiddle.net/RHaAX from fancyapps.com/fancybox/#examples No.15
好吧，引用的文档被移动了，但是试试这个jsfiddle.net/SQSFp
感谢您的回答，但是我的本地机器上不能有 pdf 文件？我需要在服务器中托管我的 pdf 文件吗？
Opps，我现在测试了，我发现我可以用这个方法从我的本地机器打开一个pdf！谢谢肯尼迪 :)
我猜没有滚动条是不可能的。我会在 Linux 上使用 unoconv Libreoffice 将 pdf 转换为图像。然后您可以将高分辨率图像添加到您的滑块

标签： jquery pdf plugins fancybox fancybox-2

【解决方案1】：

是否可以只有一个可以显示 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将仅适用如果content的type是iframe（由@设置987654328@在我们的链接中）

JSFIDDLE

【讨论】：

感谢您的回答，但我不明白 pdf 加载不正确！
@CesarM：什么意思？有时浏览器使用自己的 pdf 预览，因此它可能看起来不如使用 Adobe 阅读器好。也尝试升级您的 adobe reader 插件
我嵌入了脚本，它可以在桌面上运行，但在移动设备和平板电脑上会出现问题......

【解决方案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'
    });

【讨论】：