Fancybox to open pdf won't work on mobile devices?

Question

Im using fancybox to show pdf.

And its working fine, when I click in my links with class="fancybox_pdf", the pdf opens like I wanted!

The problem is in mobile, Im testing this also in my smartphone, and When I click to open my link with class="fancybox_pdf", the pdf is transferred and the fancybox opens empty, .

Do you know if this is normal? Fancybox to open pdf dont work on mobile devices?

(If i resize my browser for the mobile version on desktop, the fancybox with pdf also works fine)

This is my html:

<nav id="menu">
    <ul>    
      <li><a href="index.php">Home</a></li>
      <li><a class="fancybox_pdf" href="../pdf/pdf1.pdf">PDF 1</a></li>
      <li><a class="fancybox_pdf" href="../pdf/pdf2.pdf">PDF 2</a></li>
      <li><a class="fancybox_pdf" href="../pdf/pdf3.pdf">PDF 3</a></li>
   </ul>
</nav>

I have this jQuery script:

 $(".fancybox_pdf").fancybox({
        width: '80%',
        height: '80%',
        autoSize: false,
        type: 'iframe',
        iframe: {
            preload: false
        } 
});

does this work for you on mobile jsfiddle.net/wdnEM/2/show ? — JFK
Thank you for your answer JFK. And with that jsfiddle that you gave me, happens the same thing that Im having with my example. I start to download the pdf, and fancybox opens blank! — UserX
I didnt have, but I download it now, and the problem continues :/ — UserX

low_rents low_rents · Accepted Answer · 2014-08-04T21:45:05

there seem to be multiple problems with "PDF viewer" - applications in mobile browsers. though iframe is supported by most of them, it seems like most of them can't embed a "PDF viewer" into itself.

but here i found a very promising alternative solution, based on html5 and javascript only: PDF.js

you'll need some access rights on your webserver and github to install it, tho.

Fancybox to open pdf won't work on mobile devices?

1 Answers