对于所有应用Lightbox的图片及链接等只要加上原先给定的样式,再在ready中初使化一下(当然这个在你引用的thickbox.js中已自动初使化)这个东西已经在
使用中真的很方便,引入js文件与修改
CSS文件后,只要给链接绑上一个属性,class="thickbox"即可。
当然弹出的ThickBox的大小还是要自己定义的，我的意思是在ready中自己给处理掉，
jquery本身没有这样的例子，大家可以自己做。
全文 演示
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(){
