在Lightbox上查看PDF

View PDF on a Lightbox

本文关键字：PDF Lightbox      更新时间：2023-09-26

我的pdf文件没有显示在灯箱上，它只是不断加载，但当我使用iframe放置它时，它会显示出来。我把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>

希望有人能帮助我。

当事情对你不起作用时，最好考虑chrome控制台或firefox firebug中的错误。在您的案例中，如果您查看过，您会看到"Uncaught ReferenceError:jQuery未定义"，这意味着您需要使用jQuery才能使fancybox工作。此外，您还需要包括jquery鼠标滚轮和jquery轻松以及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'
});
相关文章：