Using ColorBox JQuery Plugin

Posted by Sech in Tips, Tools on Jan 23rd, 2010 | no responses

There are a number of lightbox tools are available. Until I discovered ColorBox JQuery plugin, I wasn't completely comfortable using any of them.

Why ColorBox? Well, it is easy to use, lightweight and it supports all kinds of different content like photos, photo groups, slideshow, ajax, inline, and iframed content.

I am using ColorBox JQuery plugin on one of my sites but I wish it was as easy as the thumbnail viewer plugin when using on a WordPress site. With thumbnail viewer plugin all you need to do is add rel=thumbnail to any link tag surrounding your thumbnail. You'll see an example below.

There are a couple of WordPress ColorBox plugins available. I haven't tried the LightBox Plus yet. I haven't been able to get the JQuery ColorBox WordPress plugin to work. I'd rather use ColorBox JQuery plugin on my WordPress site without a plugin. I am still experimenting with that. Including JQuery functions on WordPress header is a little different. I will soon update you on that. Stay tuned...

UPDATE 03/06/2010:

OK! Now the image on this post works with ColorBox. Here is how I made it work:

Added the link to the ColorBox stylesheet on the header.php right after all the other stylesheet links.
After "wp_head();", I put the link to the ColorBox script and the JQuery function call:

$(document).ready(function($){
$("a[rel='colorbox']").colorbox();
});

Now, pay attention to the $ in the function bracket. You won't see it on ColorBox example pages. This is required when you are adding JQuery functions to your WordPress header. Without that all the $ within your code would not be interpreted correctly. This is the best way to add JQuery functions to your WordPress header.

Finally I added the rel="colorbox" to the link to the image. You can use a different name but make sure it is the same one you in the JQuery function.

One last point: If you have the WordPress Flickr Manager plugin as I do, disable the image viewer.

Here is the ColorBox example: