Javascript 在灯箱上查看PDF

我的pdf文件并没有显示在灯箱上，它只是一直在加载，但当我使用iframe将其放置时，它会显示出来。我把pdf上传到cpanel上，我只想在一个灯箱上查看

以下是我在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>

$（文档）.ready（函数（）{
/*这是基本设置-使用默认设置*/
$（“单个图像”）.fancybox（）；
/*使用自定义设置*/
$（“内联”）.fancybox({
“hideOnContentClick”：true
});
/*将fancybox应用于多个项目*/
$（“.iframe”）.fancybox({
“transitionIn”：“弹性”，
“transitionOut”：“弹性”，
“speedIn”：600，
“加速输出”：200，
“叠加显示”：错误
});
});

---

希望任何人都能帮助我。

当事情不适合你时，最好是在chrome的控制台或firefox的firebug中承担错误。在您的案例中，如果您查看了，您会看到“uncaughtreferenceerror:jQuery未定义”，这意味着您需要使用jQuery使fancybox工作。此外，还需要将jquery鼠标轮和jquery easing与fancybox.js一起包括在内

这里有一个工作演示给你

$（“a.iframe”）.fancybox({
“宽度”：640，//或任何您想要的
“高度”：480，//或任何您想要的
“type”：“iframe”
});

你能制作一个jsfiddle.net吗？@Reigel我刚才试过使用jsfiddle.net，正如你所说的，但是lightbox似乎没有弹出。嗨@shubhra，我真的很感谢你展示的工作演示。我复制了代码，但lightbox没有显示pdf，它一直在加载。这里是链接。在产品描述中寻找零。正如我在回答中提到的，当事情不起作用时，在控制台中寻找错误。在页面上单击鼠标右键，然后单击inspect元素。点击控制台下一步，你会发现你是丢失的文件。你的代码真的工作，我的坏！javascript标记是最后一块拼图，我第一次尝试时没有包括它。非常感谢@shubhra！

<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'
});