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

Asked 1/10, 2012 at 21:46 Answered 10/4, 2015 at 15:23

Solved jquery internet-explorer fancybox fancybox-2

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?

Gerge answered 1/10, 2012 at 21:46 Comment(0)

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.

Abscission answered 1/10, 2012 at 23:44 Comment(6)

Incidentally, why does this work when none of the other things I tried do? What's going on behind the scenes here? – Gerge 10/10, 2012 at 15:9

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 for more. – Abscission 10/10, 2012 at 15:43

The html5 DOCTYPE plus the height: 99% did NOT work. I edited the answer to include scrolling: false which does work. – Paraphrast 23/8, 2013 at 23:14

@WillLanni : don't edit answer, make your pertinent comments instead – Abscission 24/8, 2013 at 0:22

Hi @Abscission in IE how to get 100% zoom – Lixivium 28/5, 2015 at 5:56

@Abscission 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 https://mcmap.net/q/2029984/-facny-box-print-callbacks – Lixivium 18/8, 2015 at 9:59

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

Vogeley answered 10/4, 2015 at 15:23 Comment(0)

Recommended topics

Hot tags