WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Error with FancyBox PDF in Safari (14 posts)

  1. JonManness
    Member
    Posted 2 years ago #

    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/

  2. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    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/ ?

  3. JonManness
    Member
    Posted 2 years ago #

    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.

  4. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    Thanks for sharing Jon :)

  5. Wahlim
    Member
    Posted 2 years ago #

    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?

  6. JonManness
    Member
    Posted 2 years ago #

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

  7. Wahlim
    Member
    Posted 2 years ago #

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

  8. JonManness
    Member
    Posted 2 years ago #

    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>

  9. JonManness
    Member
    Posted 2 years ago #

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

  10. Wahlim
    Member
    Posted 2 years ago #

    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.

  11. JonManness
    Member
    Posted 2 years ago #

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

  12. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

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

  13. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    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>
  14. Wahlim
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic