Trying to show pdf inside fancybox

Question

Im trying to use fancybox to show pdf´s, but Im not having sucess doing this.

I´m already using fancybox to show a div content, but now I`m trying to use fancy also to show a pdf inside.

I'm trying to open a pdf file that I have saved on my computer in the same way that I use to display content in fancybox but is not working with pdf.

I have in my html some links with href="#show" that point to my <div id="show">, and this links also have the class="buttonl", that is the class that I use in my jQuery script to open fancybox.

Like here: <a href="#show" class="buttonl" >Title of my first post</a><br />

Somebody there already use fancybox to show a pdf can give me some help?

My fiddle with code:

http://jsfiddle.net/ritz/WAKdB/1/

My jQuery:

$(document).ready(function() {
    $("a.buttonl").fancybox({
        maxWidth    : 800,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'elastic',
        closeEffect : 'elastic'


    });
})

My html:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<article id="loop-news">
    <h2>
    <a href="#show" class="buttonl" >Title of my first post</a><br />
    </h2>
    <span>Tuesday<strong>,</strong> 8 April 2014</span> 
    <p>My first post content is this!</p>
    <a class="buttonl" href="#show"> Read more</a>

    <div id="show">
      <h2>IM the fancybox content!!</h2>
    </div>
</article>

<hr>

<article id="loop-news">
    <h2>
    <a href="#show" class="x">Post with pdf</a><br />
    </h2>
    <span>Tuesday<strong>,</strong> 8 April 2014</span> 
    <p>My first post with pdf!</p>
    <a class="buttonl" href="#show"> Read more</a>

    <div id="show">
      <a href="../design_multimedia_method.pdf"></a>
    </div>
</article>

You have to open it as `iframe`, check http://jsfiddle.net/RHaAX/ from http://fancyapps.com/fancybox/#examples No.15 — JFK, Apr 09 '14 at 05:47
Well, the referenced document was moved, but try this http://jsfiddle.net/SQSFp/ — JFK, Apr 09 '14 at 05:49
Thank you for your answer, but so I cant have the pdf in my local machine? I need to host my pdf in a server? — OzzC, Apr 09 '14 at 14:04
Opps, I tested now, and I see that I can open a pdf from my local machine with this method! Thank you JFK :) — OzzC, Apr 09 '14 at 14:07
It's not possible without scrollbars I guess. I would convert the pdf into images with unoconv Libreoffice on linux. Then you can add the high resolution images to your slider — user2718671, Apr 09 '14 at 14:07
Thanks for your tip, I didnt know that method but as I am a linux user, I'll try that now :) — OzzC, Apr 09 '14 at 14:31
Sure thing. My other post could help probably: http://stackoverflow.com/questions/21523267/how-to-convert-pptx-files-to-jpg-or-png-for-each-slide-on-linux — user2718671, Apr 09 '14 at 14:46
JFK, sorry to boring you again. But do you know if its possible to have only one fancybox script that allow show pdf and also a div content like i have? because im trying to do that but without sucess! — OzzC, Apr 09 '14 at 23:49
Sorry, I only work with lighbox and bxslider and these both doesnt support pdf. I usually convert my PDFs to images and offer a download link — user2718671, Apr 10 '14 at 07:44

score 1 · Answer 1 · answered Apr 10 '14 at 06:21

is it possible to have only one fancybox script that allow show pdf and also a div content?

Yes, you may need to configure your html like :

<a class="buttonl" data-fancybox-type="iframe" href="document.pdf">Open pdf</a>
<a class="buttonl" href="#inline">open inline content</a>

<div id="inline" style="display:none">
    <p>Lorem Ipsum</p>
</div>

Notice that we have set a data-fancybox-type attribute to the link that opens the pdf document so fancybox will know how to deal with it

Then you can use a single script for both types of content

jQuery(document).ready(function ($) {
    $("a.buttonl").fancybox({
        maxWidth: 800,
        fitToView: false,
        width: '70%',
        height: '70%',
        autoSize: false,
        closeClick: false,
        openEffect: 'elastic',
        closeEffect: 'elastic',
        afterLoad: function () {
            if (this.type == "iframe") {
                $.extend(this, {
                    iframe: {
                        preload: false
                    }
                });
            }
        }
    });
});

Notice that the option iframe preload will only apply IF the type of content is iframe (set by the data-fancybox-type in our link)

JSFIDDLE

Thanks for your answer but I dont understand the pdf its not loading correctly! — OzzC, Apr 10 '14 at 13:47
@CesarM : meaning? some times browsers use their own pdf preview so it may not look as good as using Adobe reader. Try also upgrading your adobe reader plugin — JFK, Apr 10 '14 at 18:10
I have embedded with script, its working on desktop but issues in mobile and tablet... — SaurabhLP, May 23 '15 at 04:44

score -1 · Answer 2 · answered Dec 20 '16 at 07:36

-1

Check this http://jsfiddle.net/zqJFp/

    <a class="fancybox" href="http://samplepdf.com/sample.pdf">Open pdf</a>
    $(".fancybox").fancybox({
        width  : 600,
        height : 300,
        type   :'iframe'
    });

answered Dec 20 '16 at 07:36

Rahul Ramachandran

1
1

Trying to show pdf inside fancybox

2 Answers2