View PDF on a Lightbox

Question

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.

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

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

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>

Hope anyone could help me.

Answer 1

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.

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