在灯箱上查看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中接受错误.在你的情况下,如果你看过,你会看到'未捕获的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'
});