在灯箱上查看PDF [英] View PDF on a Lightbox

问题描述

我的pdf文件没有显示在灯箱上，它只是保持加载但是当我使用iframe显示它时。我在cpanel上传了pdf，我只想在灯箱上查看。

My pdf file is not showing on a lightbox, its just keeps loading but when i put it using an iframe it shows. I uploaded the pdf on a cpanel and i just want it to view on a light box.

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

Here's my code in an iframe, which is working:

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

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

Here's my lightbox code which is not showing the 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中接受错误。在你的情况下，如果你看过，你会看到'未捕获的ReferenceError：jQuery未定义'，这意味着你需要使用jquery来实现fancybox。你还需要包括jquery mousewheel和jquery easing以及fancybox.js。

It is always better to took for errors either in the chrome's console or firefox's firebug when things don't work for you. In your case if you had looked, you'd have seen 'Uncaught ReferenceError: jQuery is not defined', which means you need to use jquery for fancybox to work. Also you need to include jquery mousewheel and jquery easing along with fancybox.js.

这是一个适合你的演示版。 http://jsfiddle.net/g36YD/7/

Here's a working demo for you. 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'
});

这篇关于在灯箱上查看PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！