Support » Plugin: Easy FancyBox » [Plugin: Easy FancyBox] Error with FancyBox PDF in Safari

  • Resolved JonManness

    (@jonmanness)


    In Safari (5.1.2 for OS X 10.6.8), when I click on the PDF link for the first time, the PDF overlay shows up perfectly. However, if I close the PDF and click on the link again, the PDF doesn’t show at all. I have to refresh the browser in order to view the PDF overlay again.

    Is there anything I could do to fix the PDF loading in Safari? Chrome works perfectly and Firefox says “plugin needed…” but I know it’s because Firefox doesn’t have a PDF viewer.

    Here’s a link to see what I’m talking about (scroll to “Sample Page of Score” and click on PDF: http://www.jonathanmanness.com/music/finding-you-for-jazz-band

    Here is the code just in case I wrote it wrong:

    <a class="fancybox-pdf" href="http://www.jonathanmanness.com/wp-content/uploads/2012/01/Finding-You-Sample.pdf">View PDF</a>

    Thank you for your help! I know this plugin is gonna work out great for my website!

    http://wordpress.org/extend/plugins/easy-fancybox/

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author RavanH

    (@ravanh)

    It’s a know issue with the PDF plugin in Safari. You could try to use the class “fancybox-iframe” (and disable autodetect for PDFs!) to see if that works better for Safari. See my teste page on this subject on http://demo.4visions.nl/easy-fancybox-sandbox/pdf-embeds/ and try those link at the start of the post.

    Also, could you tell me if the FIRST embedded PDF file shows in Safari on http://demo.4visions.nl/easy-fancybox-sandbox/pdf-type-o/ ?

    Thank you! The solution that worked best for me was “Open in iFrame with Google Docs Viewer.” This method works the same in Chrome, Safari, and Firefox, and I don’t have to worry which browser the enduser is using.

    For anyone who’s interested in the code, activate iframe and write the code like this:

    <a class="fancybox-iframe" href="http://docs.google.com/gview?url=http://LINKTOPDF.pdf&embedded=true">LINK</a>

    I also set the iFrame Width to 85% and Height to 100% in the media settings.

    As for your question, RavanH, I could not view the first embedded PDF in Safari. It said “Missing Plug-in” and redirected me to download Adobe Reader X, which I don’t use. I’d say that everyone’s best bet is to use iFrame with Google Docs Viewer.

    Plugin Author RavanH

    (@ravanh)

    Thanks for sharing Jon 🙂

    Thanks for share the solution at first, but I still have problem to display pdf.

    I use the same code in JonManness’s post, and uncheck all settings of pdf, but when I click the link it appear ‘the requested content cannot be loaded, please try again later’. Any one know how to fix?

    Are you replacing the url http://LINKTOPDF.pdf with the link?

    Yeah, I replace it with file path, like this:
    backticks
    Download Guidebook
    backticks

    Try changing the google docs link to https instead of http (google changes it to https automatically…I also changed it to https on my site). Updated code below…

    <a class="fancybox-iframe" href="https://docs.google.com/gview?url=http://LINKTOPDF.pdf&embedded=true">LINK</a>

    Also, if that’s the exact link you’re using, you might also need to replace the IP with a domain.

    Thanks for your quick reply, I have change the code and this time it showing the loading icon in the center of screen for a long time and still nothing appear. But it didn’t stuck the browser, wierd situation.

    Hmm…hopefully the developer can chime in. Good luck!

    Plugin Author RavanH

    (@ravanh)

    It’s hard to say without a link to the live site. Is it on a local network? Are you sure you have the URL to the PDF correct and that it is accessible from where you are?

    If you have a link for us, we can probably tell more…

    Plugin Author RavanH

    (@ravanh)

    Oh, and if you want to build a working link with the Google Viewer, you can go to http://docs.google.com/viewer and use the form there. After adding the PDF URL there and generating, you will be able to click on a test link to see if it works. If it does work, then copy the URL that is the src attribute value – it should look like http://docs.google.com/viewer?url=...&embedded=true – from the embed code field and use that to create the link on your site:

    <a href="http://docs.google.com/viewer?url=...&embedded=true" class="nofancybox fancybox-iframe">link text</a>

    Thanks both JonManness and RavanH, finally I figure out. My file is in local host, and google docs viewer can only support online file, and that’s the problem.

    Thanks again!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘[Plugin: Easy FancyBox] Error with FancyBox PDF in Safari’ is closed to new replies.