How to show WordPress Gallery in a Lightbox using FancyBox

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 FancyBox.netStep 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(document).ready(function(){

   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'));

   }

add_action('wp_enqueue_scripts','fancybox_scripts_enqueue');

Step 6:Test it out.