Holiday Sale! Use coupon Holidays35 to save 35%. See Pricing →

How to use FancyBox Lightbox 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:  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:

fancybox-1

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

Screencast Thursday: Using Custom Fonts

As promised in the video, here’s the code I used in the Live CSS Editor

@font-face {
font-family: 'aleoregular';
src: url('wp-content/themes/code-child/fonts/Aleo-Regular-webfont.eot');
src: url('wp-content/themes/code-child/fonts/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('wp-content/themes/code-child/fonts/Aleo-Regular-webfont.woff') format('woff'),
url('wp-content/themes/code-child/fonts/Aleo-Regular-webfont.ttf') format('truetype'),
url('wp-content/themes/code-child/fonts/Aleo-Regular-webfont.svg#aleoregular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'aleolight';
src: url('wp-content/themes/code-child/fonts/Aleo-Light-webfont.eot');
src: url('wp-content/themes/code-child/fonts/Aleo-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('wp-content/themes/code-child/fonts/Aleo-Light-webfont.woff') format('woff'),
url('wp-content/themes/code-child/fonts/Aleo-Light-webfont.ttf') format('truetype'),
url('wp-content/themes/code-child/fonts/Aleo-Light-webfont.svg#aleolight') format('svg');
font-weight: normal;
font-style: normal;
}

body {font-family: "aleoregular";}


h2 {font-family: "aleolight";}

Screencast Thursday: How to reset Headway and layouts

Sorry this is a day late but this week we tackle resetting Headway layouts and resetting Headway completely. There won’t be a screencast next week due to the Thanksgiving holiday.  Also, we may end up doing these every other Thursday.

How to use Gravity Forms with Headway

We’re big fans of Gravity Forms here at Headway so we thought we’d go over how to use Gravity Forms with Headway. Using WordPress Simply create your form as you normally would in the Gravity Form setup, then use the “Add Form” TinyMCE button to select your form. For my screenshots, I’ve created a pageContinue Reading

Screencast Thursday: Working with Wrappers

Introducing the Working with Wrappers Screencast where you will learn how to add wrappers, change wrappers to fluid, and add wrapper aliases. Sorry for the delay on this week’s Screencast but I hope you enjoy!

Why You Should Have A Blog

For many, the one question they ask often is “why should I do a blog in the first place?” In all seriousness, before you start a blog, that is a question you have to ask. Let me put to rest right now some of the information out there. Blogging takes time. Yes it does. IfContinue Reading

Using a static front page with Headway

You may decide when you go to build or rebuild your site, that you want to use WordPress’s “Static Front Page” option so that can have a separate blog page. You can do this with Headway easily. Step One Your first step is to create the pages that will be used as the Static FrontContinue Reading

Headway Newsletter

Get the latest updates from our blog directly in your inbox! Are you ready to learn the latest from Headway Themes?

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