在灯箱上查看 PDF

Question

我的 pdf 文件没有显示在灯箱上，它只是一直在加载，但是当我使用 iframe 放置它时，它会显示。我在 cpanel 上上传了 pdf，我只是希望它在灯箱上查看。

这是我在 iframe 中的代码，它正在运行：

<p><iframe src="url/of/.pdf" width="600" height="780"></iframe></p>

这是我没有显示 pfd 的灯箱代码：

<link rel="stylesheet" type="text/css" href="/javascript/jquery/plugins/fancybox/fancybox.css" media="screen">
<script type="text/javascript" src="/javascript/jquery/plugins/fancybox/fancybox.js?b84fd"></script>

<script type="text/javascript">

$(document).ready(function() {

/* This is basic - uses default settings */

$("a#single_image").fancybox();

/* Using custom settings */

$("a#inline").fancybox({
'hideOnContentClick': true
});

/* Apply fancybox to multiple items */

$(".iframe").fancybox({
'transitionIn'    :    'elastic',
'transitionOut'    :    'elastic',
'speedIn'     :    600,
'speedOut'     :    200,
'overlayShow'    :    false
});

});

</script>


<p><a class="iframe" href="url/of/.pdf">Zero</a></p>

希望有人能帮助我。

Answer 1

当事情不适合您时，最好在 chrome 的控制台或 firefox 的 firebug 中处理错误。在你的情况下，如果你看过，你会看到'Uncaught ReferenceError: jQuery is not defined'，这意味着你需要使用 jquery 才能使 fancybox 工作。您还需要包含 jquery mousewheel 和 jquery easing 以及 fancybox.js。

这是为您准备的工作演示。 http://jsfiddle.net/g36YD/7/

<p><a class="iframe" href="http://contents.tacticalasia.com/download/511-Tactical-Catalog-2012.pdf">Zero</a></p>

$("a.iframe").fancybox({
'width': 640, // or whatever you want
'height': 480, // or whatever you want
'type': 'iframe'
});