Adding Lightbox to Genesis

If you find this free website useful – why don’t you support this with a donation? It is easy…. read more ….

Genesis doesn’t come with a light box as standard as the theme is designed to be built upon with child themes.

Of course you can add a Lightbox by just downloading a plugin, however it is fairly easy to add the code directly to your child theme.

** note this article was written in 2015 – lightboxes have moved on – especially with mobile usage – so whist the below will work – there may well be better options for touch devices **

A bit of research told me that FancyBox was probably the best javascript light box option see http://www.fancyapps.com/fancybox/. Please note, that for anything but personal or non-profit use, a small licence fee is required for FancyBox.

I had previously, on other themes used ColorBox http://www.jacklmoore.com/colorbox/ similar principals could be used as described here, but this describes implementing FancyBox.

Step 1 – Download the files

Download the zip file and unzip.  You will find a source directory which contains the files you need.

Step 2 – Create Directories in your child theme

If these directories don’t already exist you will need them, images, css, js

Step 3 – Copy files from source

From the source upload files

Images into images

jquery.fancybox.css into css

and

jquery.fancybox.pack.js into js

And also create an empty file lightbox.js  in js as this is where we will add the trigger code

Step 4 – Add the jQuery code to trigger the light box

This code is designed to trigger the lightbox only on content single images and also as a slideshow lightbox for a native WordPress gallery

(function($) {

// Initialize the Lightbox and add rel="gallery" to all gallery images when the gallery is set up
$(".gallery a[href$='.jpg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").attr('rel','gallery').fancybox();
// Trigger for image links in content
$('.entry-content a[href$=\'.jpg\'],a[href$=\'.png\'],a[href$=\'.gif\']').fancybox();

})(jQuery);

Step 5 – Enqueue  the scripts and styles

Using the child theme’s functions.php we call the required scripts and styles

// Enqueue Scripts/Styles for our Lightbox

 function child_theme_add_lightbox() {
    wp_enqueue_script( 'fancybox', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.fancybox.pack.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'lightbox', get_bloginfo( 'stylesheet_directory' ) . '/js/lightbox.js', array( 'fancybox' ), false, true );
    wp_enqueue_style( 'lightbox-style', get_bloginfo( 'stylesheet_directory' ) . '/css/jquery.fancybox.css' );
}

add_action( 'wp_enqueue_scripts', 'child_theme_add_lightbox' );

And there we have it.

This will give basic lightbox functionality for both single images and WordPress galleries.  There is a lot that probably can be improved on, perhap displaying videos in light boxes etc.

This solution was created by combining two ideas posted here http://www.enovision.net/fancybox-for-your-genesis-child-theme/ and here http://janhoek.com/add-responsive-lightbox-to-the-native-gallery-in-your-genesis-child-theme/