Question

I have an education CMS which has been using thickbox throughout for images. I now want to replace that with colorbox by removing the thickbox class and adding the colorbox class using jQuery. The class replace is occuring, but colorbox will not trigger. If I manually change the class in the CMS it works fine.

jQuery(".thickbox").removeClass("thickbox").addClass("colorbox");

I have moved the call to the replace script above the call to the colorbox script, but still no good.

Any ideas? Does colorbox need the class in the DOM on first load?

Thanks
m

Answer 1

I think the problem is in the way thickbox and colorbox are written:

Colorbox is implemented as a jQuery plugin, which is a bit different (and better) than Thickbox’s sort-of-self-contained widget model. The difference is, where Thickbox would automatically find things with the class of thickbox and apply the effect, Colorbox needs you to tell it which elements to work on.

You can remove your line:

jQuery(".thickbox").removeClass("thickbox").addClass("colorbox");

and then, after the point colorbox is included, include:

$(function(){
    $('a.thickbox').colorbox();
});

This will initialise colorbox on any links in the page with the class of ‘thickbox’, with the default settings. You can add settings to colorbox by including an object, like so: {key:value, key:value, key:value}. The available settings are on the colorbox instructions page.

As a jQuery style-point, you shouldn’t ever use a plain class selector jQuery('.something') – this will loop through every element in the whole page looking for that class, which is really slow in older browsers/machines. Qualify the selector with the tag name you want jQuery('a.something'), and/or give the selector context – by including an ID of an element to look inside: jQuery('a.something', '#contentBox') (where you have a `’ containing the stuff you’re interested in.