Первое исполнение “Thickbox” от Cody Lindley, что привлекло меня в jQuery. С тех пор он сделал апдейт, чтобы исправить некоторые кросс-браузерные проблемы.

Несколько объявлений

$(document).ready выключает функцию TB_init(), которая включается во все события onClick для всех ссылок с именем класса “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;
});

Когда ссылка с “thickbox” нажата, начинает работать функция TB_show().

$("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>");

Как Вы можете увидеть ниже, два div добавляются к телу документа. Другими словами, два div’a добавляются в конец html перед тем, как закрывается тэг body.

Свойства оверлейного div’а заданы в CSS для добавления opaque appearance. Окно TB_window, куда скрипт поместит картинку или другую веб страницу, используя AHAH.

$(window).resize и $(window).scroll говорят jQuery выключить TB_position, если размер окна был изменен пользователем или если пользователь прокрутил страницу вниз. Это демонстрирует, как Thickbox может оставаться в середине страницы, когда вы скроллируете или изменяете размер страницы.

Далее Cody ищет url в коде Thickbox, чтобы найти суффикс.

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

Если это картинка, тогда jQuery добавляет функцию, которая используется для добавления html в заданное место.

$("#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);

Иначе файл закачивается с помощью функции jQuery load().

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

Популярность: 84%