Age of Article Warning:
This article was originally published 27 months ago. The tips and techniques explained may be outdated, or information may longer be applicable. Please consider this when viewing the below content.

A great way to show off your photos and images is to use the WordPress Gallery. However it would be even better if you could click on the images in your gallery and they would open up in a nice looking lightbox.

If you don’t already have a lightbox script on your WordPress website, included in your theme or in a plugin, then this tutorial will show you how to add FancyBox script and set it up to work with your WordPress Gallery.

There is also a video tutorial included below, to show the following 6 steps in more detail.

Step 1:
Download FancyBox v1.3.4 from

Step 2:
Extract the zip file and locate the “fancybox” folder.

Step 3:
Upload this “fancybox” folder into a folder/directory called “js” inside your childtheme’s folder/directory. (You may need to create the “js” folder/directory, if it doesn’t exist in your childtheme folder)

Step 4:
Create a new file called “fancybox-scripts.js”, then insert the code below into it, then upload into the “fancybox” folder on your website.

    jQuery("a.fancybox, .gallery-item .gallery-icon a").attr('rel','postsgallery').fancybox({
        'overlayOpacity' : 0.9,
        'overlayColor' : '#111',
        'hideOnOverlayClick' : 'true',
        'enableEscapeButton' : 'true',
        'showCloseButton' : 'true'

Step 5:
Enqueue scripts and styles for FancyBox into your website pages by adding the following function into your childtheme’s functions.php file.

function fancybox_scripts_enqueue(){
    wp_enqueue_style('fancyboxcss', get_stylesheet_directory_uri().'/js/fancybox/jquery.fancybox-1.3.4.css');
    wp_enqueue_script('fancybox', get_stylesheet_directory_uri().'/js/fancybox/jquery.fancybox-1.3.4.pack.js',array('jquery'));
    wp_enqueue_script('jquery-easing', get_stylesheet_directory_uri().'/js/fancybox/jquery.easing-1.3.pack.js',array('jquery'));
    wp_enqueue_script('jquery-mousewheel', get_stylesheet_directory_uri().'/js/fancybox/jquery.mousewheel-3.0.4.pack.js',array('jquery'));
    wp_enqueue_script('fancybox-scripts', get_stylesheet_directory_uri().'/js/fancybox/fancybox-scripts.js',array('jquery','fancybox'));

Step 6:
Test it out.

How to show WordPress Gallery in a Lightbox using FancyBox was last modified: September 6th, 2016 by David Tiong
How to show WordPress Gallery in a Lightbox using FancyBox