fancybox show pdf

Question

hi i am trying to display a PDF with fancybox but I can not.

I have this code:

 $(".fancybox").fancybox({
      'frameWidth': 100,
       'frameHeight':495,
       'overlayShow':true,
       'hideOnContentClick':false,
      'type':'iframe'
})

and

<a class="fancybox" href="/symfony2/web/app.php/pdf/2"> show pdf</a>

but shows me that way generated pdf:

http://www.subirimagenes.com/imagen-pantallazo-8110661.html

Does anyone know how to solve the problem to display the facybox correctly? a greeting.

Answer 1

Could you explain what exatly does not work for you? It should work - http://jsfiddle.net/zqJFp/

<a class="fancybox" href="http://samplepdf.com/sample.pdf">Open pdf</a>

​$(".fancybox").fancybox({
    width  : 600,
    height : 300,
    type   :'iframe'
});​

Answer 2

this work for me i hope work for you!

<a class="btn btn-info btn-sm btn-hover gallerypdf" data-fancybox-type="iframe" href="../../assets/img/exp_2493_parte-3.pdf"><span class="glyphicon glyphicon-eye-open"></span></a>

$(document).ready(function() {
    $(".gallerypdf").fancybox({
        openEffect: 'elastic',
        closeEffect: 'elastic',
        autoSize: true,
        type: 'iframe',
        iframe: {
            preload: false // fixes issue with iframe and IE
        }
    });
});

Answer 3

Fancybox attempts to automatically detect the type of content based on the given url by looking at the file extension - gif, jpg, pdf and so on. In your case it cannot be detected, since your url is not ending with a ".pdf", therefore you have to set the type manually.

The accepted solution is fine because this can be done using the type option when you initialize the fancybox, however it won't work if you have mixed contents (images AND pdf together). In those scenarios, you can use the data-type inline attribute and tag each individual entry.

For example, you can do this:

<a href="getimages.php?id=123" data-type="image">
    Show image
</a>
<a href="getpdf.php?id=123" data-type="iframe">
    Show pdf
</a>
<a href="getajax.php?id=123" data-type="ajax" data-src="my/path/to/ajax/">
    Show ajax content
</a>

... and so on.