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 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 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, js2015-01-14_1733

Step 3 – Copy files from source

From the source upload files

Images into images


jquery.fancybox.css into css


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


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 and here







3 responses to “Adding Lightbox to Genesis”

  1. Thomas avatar


    Great tutorial, thanks! I’d like to activate a zoom on the picture opened in the lightbox. Is it possible just with Fancybox?

    1. Alan avatar

      I’m not aware it is, perhaps you would need to use a secondary script on top or look at ‘elevate zoom’. Let me know if you find a neat solution.

  2. ds avatar

    Step 5; function code was giving me syntax error. Had to delete all the empty space(before function, wp_enqueue_script) to make my website work again.

Leave a Reply

Your email address will not be published. Required fields are marked *