Is it possible to open a PDF with fancybox 2.1 in IE8?

Question

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?

score 11 · Accepted Answer · edited May 23 '17 at 11:53

11

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.

edited May 23 '17 at 11:53

Community

1
1

answered Oct 01 '12 at 23:44

JFK

40,963
31
133
306

Incidentally, why does this work when none of the other things I tried do? What's going on behind the scenes here? – GMK Oct 10 '12 at 15:09
behind the scenes we are building an `embed` html tag (hence `type: 'html'`) and passing the best pdf parameters possible inside of it, everything at moment we fire fancybox so this is why you only need the name of the file as `href`. [Check this doc](http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf) for more. – JFK Oct 10 '12 at 15:43
The html5 DOCTYPE plus the height: 99% did NOT work. I edited the answer to include `scrolling: false` which does work. – Will Lanni Aug 23 '13 at 23:14
@WillLanni : don't edit answer, make your pertinent comments instead – JFK Aug 24 '13 at 00:22
Hi @JFK in IE how to get 100% zoom – ratnakar May 28 '15 at 05:56
@JFK Can you please let me know how to handle print by this approach, I mean I want to perform some actions before print, please check the following question http://stackoverflow.com/questions/32063339/facny-box-print-callbacks – ratnakar Aug 18 '15 at 09:59

score 0 · Answer 2 · answered Apr 10 '15 at 15:23

That worked for me in IE and Chrome (fancybox 2.x)

//HTML
<a class="fancybox fancybox.iframe"  href="arquivo.pdf">Arquivo</a>

//SCRIPT
$('.fancybox').fancybox({
    autoSize: false,
    width: 960,
    height: 500,
    arrows: false,
    nextClick: false,
    iframe: {
        preload: false // fixes issue with iframe and IE
    },
    helpers : {
    overlay : {
        css : {'background' : 'rgba(0, 0, 0, 0.85)'}
      }
    }   
});

Is it possible to open a PDF with fancybox 2.1 in IE8?

2 Answers2