首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

thickbox的施用

2013-02-27 
thickbox的使用 script typetext/javascript srcjs/thickbox.js/script然后修改thickbox.js指名

thickbox的使用
< 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的事件。

热点排行