Bringing Thickbox Into The Present

Yesterday I had to work with the Thickbox jquery plugin that has not been updated since 2007. Much to my dismay, the format and usage of the plugin was not what I’m used to or in the standard jQuery plugin form of $(element).plugin. Thickbox, in its original form, scours your page for special anchor tags and allows them to open a lightbox. The code that this was to be used in already had usage of this for links, but I wanted to add it to a table row, so I had to update the plugin without breaking existing functionality. What follows is a quick and dirty little snippet that can be dropped into the thickbox.js file to allow proper jQuery usage.

(function($){
  $.fn.thickbox = function( options ) {  
	  var settings = $.extend( {
		  'title' : '',
		  'href' : '',
		  'group' : false,
		}, options);
    return this.each(function() {
        if ($(this).hasClass('hasThickbox') == false) {
            var $elem = $(this);
            $elem.click(function () {
                var t = settings.title
                var a = settings.href;
                var g = settings.group;
                tb_show(t, a, g);
                this.blur();
                return false;
            });
            $elem.addClass('hasThickbox');
        }
    });
  };
})( jQuery );

I’ve kept it largely the same as it was in its original form so that others can easily see how it works and so that there aren’t too many modifications to the original logic. The function expects the options: Title, href, and group. All 3 work the same way as they did with the original plugin, and the options for Thickbox are still supplied as a query string through the href option value (see herefor an explanation of the query string options).

There are still many things that I’m not particularly fond of with Thickbox, but if you’re being forced to use it, this will at least provide you with a little bit less of a hassle.