thickbox使用方法
|
到http://jquery.com/demo/thickbox/下载需要的js及css文件 单个图片时: 增加一个<a href="">然后给连接加一个class="thickbox" 多张图片时: 显示一个层内的内容时弹出任意id: 用ifame显示url ajax内容 其它技巧 thickbox是一个不错的对话框插件，不过官方站提供的使用方法具限性很大。比如，我页面上有个缩略图，点击之后用thickbox显示大图。使用官方的方法： <a href="大图的URL" title="简介" class="thickbox"><img src="小图的URL" border="0"/></a> 这种方法虽然方便，但局限性很大。 稍稍看了下thickbox的代码，其实以上问题完全可以使用thickbox自己的方法来解决，以下举例说明。 例一。我能自己定位到需要用thickbox的元素，不想再加上class="thickbox"。HTML如下： <div id="PicList"> <a href="Pic01.jpg"><img src="Pic01s.jpg" 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里的class="thickbox"这样的标签点击了没有任何反应。解决此问题只要在AJAX载入HTML并更新到页面后执行下以下代码： tb_init('a.thickbox, area.thickbox, input.thickbox'); //引号里的是thickbox的默认选择器，你可以使用例一内这样的自定义选择器
例三。我想点击img标签后显示thickbox，不想在img标签外面再套<a url="大图" class="thickbox">这样的标签。缩略图URL只不过在大图URL的后缀前加了s。比如大图是pic01.jpg、小图是 pic01s.jpg。使用以下方法可以做到。HTML如下： <div id="PicList"> <img src="Pic01s.jpg" 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的事件。 |