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/
Comments
3 responses to “Adding Lightbox to Genesis”
-
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.
-
-
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 Thomas Cancel reply