Skills you will need: uploading files to your server, creating a Headway child theme, creating a WordPress gallery.
In this tutorial, I will show you how to use FancyBox with Headway. You certainly can use a plugin to take of this functionality for you but this tutorial is plugin free.
Please note the licensing for FancyBox. Free for personal or non-profit use but you must pay a fee for commercial use.
Step One: Child Theme
First and foremost, you need a child theme for this. I’m going to presume you have one and have it activated as we move forward.
Step Two: Download FancyBox
Proceed to FancyBox and download the zip file. Unzip the zip file you download. If you do not change the filename, the zip filename will look something like this
fancyapps-fancyBox-v2.1.5-0-ge2248f4.zip (Note: if you use safari, it automatically unzips files). The unzipped folder will contain several folders. We are going to focus on the
Step Three: Upload files
Inside the child theme folder on your server, create a new directory named
js. Inside that folder, create a new folder called
fancybox. Upload all of the files (not the folder) contained in the
For this tutorial, you do not need to upload the
helpers folder but you can use the files in that folder to extend the functionality of FancyBox.
Step Four: Enqueue Scripts
In your child theme
functions.php, copy and paste the following code:
You should not have to change anything if you have followed my instructions exactly. This code will determine the correct path to these files.
If you have not already opening PHP then you need to add
<?php before the function
Step Five: Add the jQuery to Headway
In the WordPress admin, go into Headway » Options » Scripts/Analytics and place the following code in the Header Scripts box
So what does this do? It adds a rel attribute of fancybox-gallery to each WordPress Gallery item and any anchors with the class of fancybox and then calls the fancybox script for those items. The options for fancybox include allowing escape to exit the lightbox, showing a close button, fitting the lightbox to the viewing area, and moving to the next photo on click (not just when clicking left/right arrows). More options can be found in the documentation.
Step Six: View your WP Gallery or create one
If you haven’t already created a WP gallery on a page or post, you’ll need to create one to view the result. It should look like this once you click on a photo:
And that’s it… you’re done! That wasn’t so hard, was it?