javascript - Ver PDF en un Lightbox

Mi archivo PDF no se muestra en un lightbox, solo sigue cargando, pero cuando lo pongo usando un iframe sí se muestra. Subí el PDF en un cPanel y solo quiero verlo en un lightbox.

Aquí está mi código en un iframe, que está funcionando:

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

Aquí está mi código de lightbox que no está mostrando el PDF:

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

Espero que alguien pueda ayudarme.

Respuesta #1

Siempre es mejor buscar errores ya sea en la consola de Chrome o en Firebug de Firefox cuando las cosas no funcionan para ti. En tu caso, si hubieras mirado, habrías visto 'Uncaught ReferenceError: jQuery is not defined', lo que significa que necesitas usar jQuery para que fancybox funcione. También necesitas incluir jquery mousewheel y jquery easing junto con fancybox.js.

Aquí tienes una demostración en funcionamiento. 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'
});