Example Code

<a href="#pdf" target="foobox">Read Chris Coyier's and Jeff Star's Free Demo Book:  Digging into WordPress</a>
<div id="pdf" style="display: none;">
	<div>[your-pdfjs-shortcode]</div>
</div>

Walkthrough

The first thing you’ll notice in the Example Code above is the shortcode called “pdfjs-viewer”. This comes from  this plugin. This plugin is a reliable and well supported method of embedding PDFs in your website in a way that provides all browsers a similar experience. It is based on Mozilla’s PDF.js project.

Using that plugin shortcode, we wrap it in a hidden div and load it into FooBox with the inline HTML method. Notice that you’ll need to find the right balance of implementing the width and height within the shortcode, and perhaps adding the data-attributes for width and height in your link for FooBox as well. See the documentation on inline HTML for the available data-attributes.