jQuery教程（十三）jQuery Lightbox （插件）

Cody Lindley 移植的第一版“ Thickbox”让我第一次感受到了jQuery的魅力。后来他又做了一些 代码升级以修复若干跨浏览器的兼容性问题。

一些需要注意的地方

$(document).ready 取代了TB_init() 函数，作用是在每个包含对象名“thickbox”的链接上附加一个onClick事件。

function TB_init(){

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

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

TB_show(t,this.href);

this.blur();

return false;

});

当这些链接被点击时，TB_show()函数就将执行。

$("body")

.append("
  
    

  
    
");

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

$(window).resize(TB_position);

$(window).scroll(TB_position);

$("#TB_overlay").show();

$("body").append("
  
    
 
     
  
     
 
    
");

如你所见，在文档body元素前添加了两个div元素。换句话说，这两个div元素将被添加在页面html代码的body关闭元素前。

覆盖的div将使用一个特定的包含不透明外表的CSS文件指定表现。TB_window的代码用来通过AHAH在页面中放置一张图片或者加入另一个页面。$(window).resize 和$(window).scroll 告诉jQuery在用户重新调整窗口大小或者拖动页面翻页的时候执行TB_position函数。这是保证Thickbox始终保持在窗口中心部位的手段。

接下来，Cody查询url的后缀。

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的append函数会添加html代码到适当位置。

$("#TB_window").append(""

+ "
  
    

      " 
    
  
    
 
     close 
    
"+caption+");

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

另外，远程文件将使用jQuery的load()函数导入。

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