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

Step 3 – Copy files from source

From the source upload files

Images into images

2015-01-14_1735

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/

,

3 responses to “Adding Lightbox to Genesis”

  1. Hi,

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

    • 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. 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 to ds Cancel reply

Your email address will not be published.