Geek asks and answers

Fancybox show pdf

Hi, I am trying to display 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 that the created pdf:

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

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

+6
source share
3 answers

Could you explain what doesn’t really 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'
});​
+10
source

this is 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
        }
    });
});
+4
source

Fancybox URL, - gif, jpg, pdf . , URL ".pdf", .

The decision made is good, because it can be done with the parameter typeduring fancybox initialization, however it will not work if you mixed the content (images and PDF together). In these scenarios, you can use the built-in attribute data-typeand mark 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>

... etc.

+1
source

More articles:


All Articles