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:


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.