How to setup Drupal COLORBOX Module as a replacement for lightbox

  • Posted on: 13 August 2010
  • By: NickLitten

blatant use of incredibly sexy Stacey Keibler photoSo, 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...

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

I'm going to run colorbox on nicklitten.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:

using the drupal scanner module

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="//www.nicklitten.com/sites/default/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....