Menu
I'm working on a site that hosts a lot of PDF files and I want to open them in fancybox (2.1) for a preview. It works just fine in Chrome and Firefox. But it just won't work in IE8. I've tried linking directly to the PDF file, linking to an iframe, and linking to an embed tag (among other crazier things). I can't use google to wrap them. Here is a page that demonstrates the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My Page</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fancybox.js?v=2.1.0"></script>
<link type="text/css" rel="stylesheet" media="screen" href="jquery.fancybox.css" />
</head>
<body style="background-color:grey">
<p><a href="mypdffile.pdf" class="fancypdf">a link</a> to a PDF file.</p>
<p><a href="#Frame1" class="fancy">a link</a> to an iframe with the pdf in it.</p>
<div style="display:none">
<iframe id="Frame1" src="mypdffile.pdf" style='width:100%;' height="600" frameborder="0" allowTransparency="true"></iframe>
</div>
<p><a class="fancy" href="#mypdf" >a link</a> to a pdf in an embed tab</p>
<div style="display:none"><div id="mypdf">
<embed src="mypdffile.pdf" type="application/pdf" width="640" height="480" />
</div></div>
<script type='text/javascript'>
$(function(){
$("a.fancypdf").fancybox({type:'iframe'});
$("a.fancy").fancybox();
});
</script>
</body>
</html>
The results are different each time. In IE for the first link the spinner appears and hangs. For the second two, a fancybox popup appears, but it's empty. What am I doing wrong?
315
jQuery(document). ready(function($) { $('button'). on('click', function() { $. fancybox(); }); });
Sure it is possible, for this type of html :
<a class="fancypdf" href="path/file.pdf">open pdf</a>
you could use this code :
$(".fancypdf").click(function(){
$.fancybox({
type: 'html',
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
}
}); //fancybox
return false;
}); //click
With this method, you don't need to embed the PDF in your page.
NOTE: If you are using HTML5 <!DOCTYPE html>, I would recommend you to set the height just to 99% to avoid a double vertical scroll bar in your PDF viewer. This is because the way HTML5 initializes margins (see the content option, embed tag in code above)
UPDATE: this DEMO is from another post but opens a PDF with fancybox v2.x
EDIT (April 2014) :
Notice (down-voters) that this answer is more than one and a half year old. Since then browsers and their plugins have evolved and most likely a better option is to open PDF within iframes. Check this Nonetheless, embedding may be a suitable solution for some scenarios.
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
