Documentation › How to use FancyBox with Headway

How to use FancyBox with Headway

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

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

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:

function fancybox_scripts_enqueue(){
wp_enqueue_style('fancyboxcss', get_stylesheet_directory_uri().'/js/fancybox/jquery.fancybox.css');
wp_enqueue_script('fancybox', get_stylesheet_directory_uri().'/js/fancybox/jquery.fancybox.js',array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'fancybox_scripts_enqueue' );

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

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("a.fancybox, .gallery-item .gallery-icon a").attr('rel','fancybox-gallery').fancybox({
        'enableEscapeButton' : 'true',
        'showCloseButton' : 'true',
	'fitToView' : 'true',
        'nextClick' : 'true'
    });
});
</script>

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:  Create your WP Gallery

If you haven’t already created a WP gallery on a page or post, you’ll need to create one to view the result. Click on “Add Media” when editing a page or post.

Edit_Post_‹_Headway_Themes_—_WordPress

Then, click on Create Gallery and click on the photos you want to include.
Edit_Post_‹_Headway_Themes_—_WordPress

When done, click on Create a new Gallery at the bottom:
Edit_Post_‹_Headway_Themes_—_WordPress

Finally, in gallery settings, make sure the image is linking to the media file:

Edit_Post_‹_Headway_Themes_—_WordPress

Lastly, view your post or page and click on an image. It should look like this once you click on a photo:

fancybox-1

And that’s it… you’re done! That wasn’t so hard, was it?

This article was last updated for Headway version 3.8.8

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress