How to create a Custom WordPress Lightbox or Colorbox

This tutorial will show you how to create a completely custom  jQuery WordPress Lightbox or Colorbox that can include photo groups, custom html, custom html groups and will allow you to use the WordPress loop to make it even cooler.

It will be using the jQuery plugin, “Colorbox”, which you can get and read about here > http://www.jacklmoore.com/colorbox/

Download the jQuery script jquery.colorbox-min.js and put it in your theme’s “js” folder. Also create a “custom.js” and put it in your theme’s “js” folder.

Enqueue the 2 scripts in your themes function file. Example

Link the default colorbox.css file into your theme. You’ll also want to put in the images that come with it in your images folder.

It should all be working now. Here is an example of the simplest form of this plugin. The a class”inline” matches the script in your custom.js file, just like the one you downloaded above.

 How to do inside of a WordPress loop.

In this Example, you sanitize your titles to be included in your divs so that the correct link will open the  correct hidden div for the lightbox. Your a class of “group-name” changed from the first example and needs to match the jQuery script in your custom.js file.

That would look like this now:
The inline: true allows for html in the lightbox, the width is the width on your screen the lightbox will open.

This is important because you could set up multiple groups that will allow you to click next while staying in the lightbox.

Multiple Group Example 

First you would have to add a group to your custom.js file. So it might look like this:

Then you could set up two loops where you could click through all the things in lightbox in the first loop, close it and click on another item that came from another loop and be able to click through those without mixing the two. So that might look like this:

 

 

 

Leave a Reply

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

+ 69 = 77