fancybox show pdf | 易学教程

问题

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.

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

回答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
        }
    });
});

回答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.

来源：https://stackoverflow.com/questions/13293980/fancybox-show-pdf

标签

jquery

fancybox