Open a PDF in FooBox

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.

Resources

Find the right next step

Use this grid for documentation indexes, support routes, account links, affiliate resources, and download pages.

Documentation

Search setup guides, product docs, and troubleshooting articles.

Support

Open a ticket with product details so we can help quickly.

Licensing

Review account, renewal, refund, and license information.

NEW BUNDLE ALERT

5 Tools, 50+ Sites
1 License

The FooGallery Agency Bundle is now available with both annual and lifetime payment options

Launch Discount Included