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.

Solution

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

Comments

[zen]

Hi @shubhra, i'am really grateful for the working demo you showed. I copied the code but the lightbox is not showing the pdf, it keeps on loading. Here is the link mouse.mybigcommerce.com/zero-book. Look for the Zero in the Product Description.

[shubhra]

As I mentioned in my answer, look for errors in the console when things don't work. Do a right click on the page and click on inspect element. Click on console next and you will find that you are missing files.

[zen]

Your code really works, my bad! The javascript tags was the last piece of the puzzle, I didn't include it the first time i tried it. Thank's a lot @shubhra!