在灯箱上查看PDF

时间:2014-05-02 02:09:03

标签: javascript jquery pdf iframe lightbox

我的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>

希望有人能帮助我。

1 个答案:

答案 0 :(得分:6)

当事情不适合你时,最好在chrome的控制台或firefox的firebug中接受错误。在你的情况下,如果你看过,你会看到'未捕获的ReferenceError:jQuery未定义',这意味着你需要使用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'
});