Cody Lindley’s first rendition of “Thickbox” was what got me interested in jQuery. He’s since done an update on Thickbox to fix some cross browser compatibility issues.

A few things to notice

$(document).ready kicks off the TB_init() function, which in turn attaches an onClick event to all links with the class name of “thickbox”.

function TB_init(){

	$("a.thickbox").click(function(){

	var t = this.title || this.innerHTML || this.href;

	TB_show(t,this.href);

	this.blur();

	return false;

	});

When a “thickbox” link is clicked, the TB_show() function fires.

$("body")
 .append("<div id='TB_overlay'></div><div id='TB_window'></div>");
 $("#TB_overlay").click(TB_remove);
 $(window).resize(TB_position);
 $(window).scroll(TB_position);

 $("#TB_overlay").show();
 $("body").append("<div id='TB_load'><div id='TB_loadContent'><img
  src='images/circle_animation.gif' /></div></div>");

As you can see above, there are two divs that are appended to the document body. In other words, the two divs are added to the end of the html just before the closing body tag.

The overlay div is styled by css to have an opaque appearance. The TB_window is where the script will place an image or pull in another web page using AHAH.

$(window).resize and $(window).scroll tell jQuery to fire off the TB_position function if the window is resized by the visitor or if the visitor scrolls down the page. This is how Thickbox is able to stay in the middle of the page when you scroll or resize the window.

Next, Cody searches the url passed to the Thickbox code to find the suffix. 

var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.html|\.htm|\.php|\.cfm|\.asp|\.aspx|\.jsp|\.jst|\.rb|\.txt/g;

		var urlType = url.match(urlString);

		if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'){//code to show images

If it’s an image, then the jQuery append function is used to add the html to the appropriate spot.

$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img
id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"'
alt='"+caption+"'/></a>"
 + "<div id='TB_caption'>"+caption+"</div><div
  id='TB_closeWindow'><a href='#' id='TB_closeWindowButton'>close</a></div>"); 

 $("#TB_closeWindowButton").click(TB_remove);

Otherwise, the remote file is pulled in using the jQuery load() function.

$("#TB_ajaxContent").load(url, function(){