After my recent tutorial where I showed you how to Add a Responsive jQuery Slider to Your WordPress Theme, I thought I'd show you how to add a responsive lightbox to your WordPress site.

We're going to be using the incredible fancyBox jQuery plugin (script) to demonstrate the implementation of the lightbox, but the same principles can apply to most lightbox scripts. This tutorial is going to be primarily taught through a 15-minute screencast, but I've also included some brief written instructions too.

Step 1 Include the Files

First thing we need to do is download fancyBox from the fancyBox website. We then want to open up the source folder, where we're going to copy the following files to our theme (note that we're using WordPress' default Twenty Twelve theme):

• blank.gif
• fancybox_overlay.png
• fancybox_sprite.png
• jquery.fancybox.css
• jquery.fancybox.pack.js

It's best to stay organised though, so let's create a folder in our theme's inc directory called lightbox, and in there we'll create three new folders: css, js and images. At this point you also need to create a file called lightbox.js (don't worry about it just yet). We then need to split up the files above into their appropriate locations, so it'll look like the image below.

You'll need to edit the paths to images in jquery.fancybox.css so it matches our new file structure. You can do so by doing a search and replace for:

url(' with url('../images/

Step 2 Enqueue Lightbox Files

Now that we've got the folder above filled with all the required files, we need to actually load them! Open up your functions.php file and add in the following:

 1 2 // Enqueue Scripts/Styles for our Lightbox  3 function twentytwelve_add_lightbox() {  4  wp_enqueue_script( 'fancybox', get_template_directory_uri() . '/inc/lightbox/js/jquery.fancybox.pack.js', array( 'jquery' ), false, true );  5  wp_enqueue_script( 'lightbox', get_template_directory_uri() . '/inc/lightbox/js/lightbox.js', array( 'fancybox' ), false, true );  6  wp_enqueue_style( 'lightbox-style', get_template_directory_uri() . '/inc/lightbox/css/jquery.fancybox.css' );  7 }  8 add_action( 'wp_enqueue_scripts', 'twentytwelve_add_lightbox' ); 

What we've done above is enqueued the FancyBox minified script (and by dependency, Wordpress' included jQuery library), our new lightbox.js file, as well as FancyBox's stylesheet. Too easy!

Step 3 Initializing The Lightbox

Remember that lightbox.js file we created earlier? Time to open it up and fill it with some beautiful jQuery! In the screencast above I showed you each example separately so you could better understand how the jQuery actually worked, but below is all of the code combined. Copy this to the lightbox.js file:

 1 2 (function($) {  3 4  // Initialize the Lightbox for any links with the 'fancybox' class  5 $(".fancybox").fancybox();  6 7  // Initialize the Lightbox automatically for any links to images with extensions .jpg, .jpeg, .png or .gif  8  $("a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif']").fancybox();  9 10  // Initialize the Lightbox and add rel="gallery" to all gallery images when the gallery is set up using [gallery link="file"] so that a Lightbox Gallery exists  11 $(".gallery a[href$='.jpg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").attr('rel','gallery').fancybox();  12 13  // Initalize the Lightbox for any links with the 'video' class and provide improved video embed support  14  \$(".video").fancybox({  15  maxWidth : 800,  16  maxHeight : 600,  17  fitToView : false,  18  width : '70%',  19  height : '70%',  20  autoSize : false,  21  closeClick : false,  22  openEffect : 'none',  23  closeEffect : 'none'  24  });  25 26 })(jQuery); 
Tip: You should only really include the parts of the code above that you need. I've only included everything so you can see the different options for initializing the lightbox.

Step 4 Usage

You can now use the Lightbox! With the above code it's set up to automatically add a lightbox for all links to image files with .jpg, .jpeg, .png or .gif extensions. So the following bit of code would produce a lightbox:

 1 2  

Lightbox Galleries:

You can also create a 'lightbox gallery' by adding the same rel attribute to several links, like so:

 1 2   3   4   5 6   7   8   9 10   11   12   13 14   15   16  

However, that same lightbox gallery can also be achieved by just inserting a plain old Wordpress Gallery into your post or page. Just be sure to link the thumbnails to the image files like so:

Video Lightbox:

Also included is video lightbox support, which can be achieved by linking to a video's IFRAME embed URL (find it by looking at a video's embed code from a service like YouTube or Vimeo) and giving it a class of video and fancybox.iframe, like so:

IFRAME Lightbox:

In addition to IFRAMEs in video lightboxes you can embed other IFRAMES, such as Google Maps, by including the same video and fancybox.iframe classes, like the following:

 1 2 Google Maps (IFRAME) 

Captions:

As you can see in the video, some of the images I automatically inserted and applied a lightbox to have captions. These are determined by the title attribute of the link. So for example, see the captions being set in the following piece of code:

 1 2   3 Click for an image!