How to setup Drupal COLORBOX Module as a replacement for lightbox

So, I've spent what seems like years trying to toss up between the Lightbox and Thickbox modules on Drupal. I like them both, but finally opted for Lightbox2 and have been using that on most of my sites for the last year or so. Lightbox is a great little module and works well across the board. However, after recently updating the most excellent Ubercart module I read an interesting thread on the ubercart forum, extolling the virtues of the new lightbox kid-on-the-block - colorbox. This new module was vocally supported for lots of little reasons so I decided to jump ship and give it a try.

I like it. This also gave me a valid reason to search for a sexy photo to demo the colorbox and I discovered Ms. Stacey Keibler, shown right, I had to look at this bikini photo quite a lot... I can tell you... /me continues to gibber and drool until mental function resumes...

• Install the Drupal Colorbox module in sites/all/modules
• Install the colorbox plugin in the sites/all/libraries folder
• enable it and i just works.

Very cool... and it possibly feels quicker rendering the images than lightbox2.

I'm going to run colorbox on projex.com for a week or so and try to gain a real opinion on real life use of colorbox as a replacement for lightbox2... we shall see which one I end up using ;)

Dont flame me... that just my opinion.

My only head scratcher has been enabling the colorbox for images which are linked within my website articles.

How do I enable inline images with colorbox?

It turns out this is simple, but just not very clearly documented. Anyway, to use the Drupal Colorbox module for inline images you simply need to add class="colorbox-load" to your "<A HREF" tags.  ;)

The same way that Lightbox uses rel="lightbox" just replace the existing rel="lightbox" parameters with class="colorbox" and voila it all works hunky dory.

I used the wonderful SCANNER module to do it across the entire website in one easy click:

You will notice that this little screen shot also apears in a nice little coorbox when you click on it - the HTML code, just to clarify once more is : <a href="/files/projex-scanner-module.jpg" class="colorbox">

So I just asked it to replace all occurrences of LIGHTBOX with COLORBOX and now all my inline images open in a nice little colorbox window.

Try it yourself and leave a comment if you get stuck....