Gems of Docs: Embed PDFs with FooBox Lightbox

Reliably embedding PDFs in a website is not as straight-forward as one might think. This is primarily because each browser handles PDFs differently. Some treat it only as a file, others as media, and Chrome even created its own unique PDF viewer. This means that users in every different browser will have a different experience with embedded PDFs.

Enter PDF.js

The good new is that the folks at Mozilla have been working on a really slick and responsive, cross-browser PDF embed tool. They just call it PDF.js. Here’s their demo of a PDF embedded into a page.

Of course, no jQuery “rock” can go unturned in the WordPress plugin Repository. So there is now also a handy shortcode plugin for utilizing PDF.js in your WordPress site. It’s really easy to implement.

Enter FooBox

But the real magic comes in combining this with the FooBox media lightbox for WordPress. Check out the documentation page on this implementation here. Here’s a couple things you should notice:

  1. There’s no horizontal scrollbar. Meaning it’s responsive.
  2. It has it’s own custom controlbar at the top. That’s necessary in order for all those tools to be available regardless of the browser
  3. You load it in FooBox with the inline HTML method, which means you can add captions, custom captions, sharing icons, or even make it part of a mixed media gallery just like any other inline HTML

Caveats and Alternatives

So far though, it’s not a perfect solution. Though PDF.js provides a way to enable their viewer on mobile devices, it seems that the author of the WordPress plugin is yet to fully implement that. So that is a serious limitation.

There is another PDF embed script, called PDFObject that is MUCH simpler, but it is not responsive at all. It would be really simple to utilize that on your WordPress site with a js include plugin like CSS & JS Toolbox. Then it could also be loaded with FooBox as inline html, but the width and height would have to be static.

The bottom line is that it is possible, and it is a really dramatic and slick and modern way to present PDF content on your WordPress website with FooBox. Just provide a download link for your mobile viewers in addition.

Tagged with, ,
This post was written by
Matt is our "Solutions Manager". When you contact us, he's your guy. Matt has been building websites for 10 years, tweaking and hacking at WordPress for 3 years, and generally being helpful since birth.

3 Comments on "Gems of Docs: Embed PDFs with FooBox Lightbox"

  • Just a quick question from a beginner; on the FooBox documentation page (“Presenting PDFs in FooBox”), the explanation begins with:

    ‘The first thing you’ll notice in the Example Code above is the shortcode called “pdfjs-viewer”.’

    I didn’t see that expression in the code example; am I missing something, or am I supposed to be seeing that when I inspect that element in my browser?

    Sorry to ask about it here, but comments are disabled on the documentation page.

    • Hi Ryan, good catch. The shortcodes often get rendered even when wrapped in code tags. I’ve fixed the documentation page. Check it out again and feel free to hit us up in support if you have any trouble at all. Thanks!

Leave Your Comment