How to add any Lightbox script to the Easy Image Gallery plugin

Easy Image Gallery is a plugin I created for creating and managing galleries outside of the WordPress editor. It comes packaged with support for fancyBox and prettyPhoto but it’s really easy to add another Lightbox should you need to do so.

This tutorial will show you how to add Colorbox to the plugin, but the same methods apply for any Lightbox script. Place the following code snippets in your theme’s functions.php or any other file you have included into your theme.

1. Add Colorbox to Easy Image Gallery’s plugin settings

Easy Image Gallery has an included filter called easy_image_gallery_lightbox which allows you to add a new option to the Lightbox select menu. It also properly saves the new option to the database.

The first instance of colorbox is the value saved to the database which we check for in later examples, and the second is merely the label that shows up in the select menu.

Using the code above should get you this:

easy-image-gallery-settings

2. Load the required scripts for Colorbox.

Next we use wp_enqueue_script and wp_enqueue_style to load the JS and CSS files. We load the scripts onto an action hook included with Easy Image Gallery called easy_image_gallery_scripts. This action hook is fired inside a wp_enqueue_scripts action which will load the scripts onto the page.

By using Easy Image Gallery’s action hook, we ensure the scripts are only loaded if there’s a gallery, and that the images within the gallery are linked to larger images.

In the example above, I’ve placed the JS and CSS file in a folder called colorbox which is sitting in the theme’s main folder. Note the use of get_stylesheet_directory_uri() which will first look in the child theme, and then the parent if the files do not exist there.

Some Lightbox scripts like Colorbox also have images so we don’t want to forget those. In this instance we can just copy the images folder from the Colorbox download and include it in our colorbox folder. You’ll need to check with the Lightbox you are trying to implement as to where the images need to reside.

3. Initialise the Colorbox

Finally, we need to initialise the Colorbox script in our footer. Easy Image Gallery provides another handy action hook for doing this called easy_image_gallery_js. Again, by firing on this hook we ensuring that the JS will only load if there’s a gallery and the images link to larger versions.

If you want to add any additional options to the Lightbox, you would add them to JS below. Such options might be the Lightbox opening/closing effect, speed at which it opens etc.

7 comments

  1. Pingback: Top 10 Free WordPress Plugins of the Month — October 2013

  2. Pingback: Pressed Solutions | WordPress Development.Management.Support Top 10 Free WordPress Plugins of the Month — October 2013 - Pressed Solutions | WordPress Development.Management.Support

  3. Pingback: Top 10 Free WordPress Plugins of the Month — October 2013 | Site Restore NowSite Restore Now

  4. Jason Hoffmann

    Hey the gists on your page aren’t displaying so it’s impossible to see the code.

    • Sumobi

      Hi Jason, are they still not showing for you?

  5. Pingback: My Top Ten Wordpress plug-ins for October 2013 | Webflow Design Gold Coast

  6. Greg Elsbernd

    If you are using NoScript, temporarily allow all for this page, they will show.

Leave a Reply

Your email address will not be published.

*