jquery的thickbox使用技巧汇总
到http://jquery.com/demo/thickbox/下载需要的js及css文件
分别保存到目录
--js
--css
--images
中，
使用thickbox提供的方法，可以更加自由的用js控制元素动作：
1. tb_init()初始化，等于给a标签加class。
Ajax加载内容后用tb_init(’a.thickbox, area.thickbox, input.thickbox’);
2.等于a标签的点击动作:tb_show("",this.src.substring(0,this.src.length-5)+’.jpg’,false);
一、 在文件的<head></head>中插入
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
然 后修改thickbox.js指名loadingAnimation.gif 这个图片的路径
二、 在<head></head>中插入CSS
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
例子
单个图片时:
增加一个<a href="">然后给连接加一个 title="caption" rel="test" title="测试一">测试一</a>
<a href="images/b.jpg" rel="test" title="测试二">测试二</a>
显示一个层内的内容时弹出任意id:
创建立一个link <a href="">
给 连接增加一个class属性title="简介" border="0"/></a>
这种方法虽然方便，但局限性很大。
第一、你必须为每个这样的img标 签外套一个a标签
第二、只能用border="0"/></a>?? <a href="Pic02.jpg"><img src="Pic01s.jpg" border="0"/></a></div>
需要对id="PicList"里面的a标签下的img使用 thickbox，代码如下：
$(function() {?? tb_init("#PicList a[img]");});例二。我用AJAX载入了一段HTML， 但该HTML里的 border="0"/>?? <img src="Pic01s.jpg" border="0"/></div>
代码如下：
$(function() {?? $("#PicList img").click(function() {???? tb_show("",this.src.substring(0,this.src.length-5)+’.jpg’,false);?? });});另外，如果想用其它事件，请使将例3里的click改成你想触发 thickbox的事件。
?