• Home
  • Cloud
    • General
    • SaaS
    • BPaaS
    • PaaS
    • IaaS
    • Other Internet Hosted Applications
      • WordPress
        • WooThemes Canvas
          • WooThemes Canvas CSS
  • About me
  • Why Badly Wired?
  • Contact

Badly Wired

Alan's technical notebook - WordPress and other stuff

You are here: Home / Genesis / Adding Lightbox to Genesis

Adding Lightbox to Genesis

14th January 2015 by Alan 3 Comments

Fully Managed UK Hosting - Only £1+VAT till 1st Jan 2021 on Shared, Reseller and Dedicated Hosting! .... 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.

Fully Managed UK Hosting - Only £1+VAT till 1st Jan 2021 on Shared, Reseller and Dedicated Hosting! .... read more ....

** 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/

[Next] Find out where to host WordPress [Read the full article…]

Filed Under: Genesis, Wordpress  Tagged: lightbox

About Alan

I'm Alan from Fullworks Digital Ltd, where I develop WordPress Plugins .

My day job consists of developing new code and solutions along with support my WordPress plugin user.

I started as a professional programmer in 1979 and had been involved with the IT of business technology in virtually every area that exist.

Badlywired.com is my technical notebook, my aide memoire of the many interesting facts that I come across and 'how to' recipes of things I do infrequently. As I spend a lot of time gathering parts of solutions from the internet and assembling them into my own solutions, and also just learning how to do things, this blog is one way of giving something back to the online community that has helped me extensively.

Comments

  1. Thomas says

    3rd February 2015 at 11:44 am

    Hi,

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

    Reply
    • Alan says

      3rd February 2015 at 6:16 pm

      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.

      Reply
  2. ds says

    12th June 2015 at 8:18 am

    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.

    Reply

Leave a Reply to Alan Cancel reply

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

Categories

  • Applications
  • Cloud
    • General
    • Google Cloud
    • IaaS
    • Other Internet Hosted Applications
      • Wordpress
        • WooThemes Canvas
        • WooThemes Canvas CSS
    • SaaS
  • Code snippets
  • Discounts
  • Genesis
  • Google Apps for Works
  • Linux
  • News
  • SEO
  • Server setup
  • Services
  • Tech Tips
  • Uncategorised
  • Useful Images
  • Useful Stuff
  • WordPress Hosting
  • WordPress Plugins

Tags

background jobs beadcrumbs bind brandings Cache canvas Centos chrome css fail2ban Find firefox Flash fraud genesis gocardless godaddy Google google maps hackers internet explorer javascript KashFlow Linus linux Magento mapquest maps microsoft mysql news nohup php plugin plugins queens diamond jubilee replace SED SEO skype Varnish Virtualmin Webmin woothemes Wordpress

 

Affiliate and Privacy Notices

This site is free to use, but hopes to cover some costs through affiliate income, some products and links are affiliates and may earn the site advertising income.

Some affiliates use Cookies to track if you purchase from them, this allows them to apportion revenue to us you will need to refer to their specific privacy notices as to how you are tracked.

This site is a participant in the Amazon EU Associates Programme, an affiliate advertising programme designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.co.uk.

  • Privacy Policy

Copyright © 2021 · Badly Wired