前不久曾发表过一篇介绍Tinybox的文章《通过javascript实现的轻量级模态框解决方案（支持Ajax）》。今天一位朋友就tinybox的使用提出一个问题：如果在侧边栏有很多图片的缩略图，如何能一次性的给它们添加tinybox模态框效果。这样的应用是非常实际的，下面我就这个问题说一下解决方案。
首先来看一下在线示例：Tinybox扩展Demo
实现方法：
在html中定义某个div内的缩略图列表（这里缩略图是通过指定一个较小的width实现的）
<div id="picgroup"> <ul> <li><img src="images/1.jpg" width="120px" /></li> <li><img src="images/2.jpg" width="120px" /></li> <li><img src="images/3.jpg" width="120px" /></li> <li><img src="images/4.jpg" width="120px" /></li> <li><img src="images/5.jpg" width="120px" /></li> <li><img src="images/6.jpg" width="120px" /></li> <li><img src="images/7.jpg" width="120px" /></li> <li><img src="images/8.jpg" width="120px" /></li> </ul> </div>
下面要做的是获取到id为picgroup的div区域中的所有image对象，并在它们的点击事件中调用tinybox模态框，脚本如下：
$.fn.outer = function() { return $('<div></div>').append( this.eq(0).clone().removeAttr("width") ).html();}; $(function() { $("#picgroup img").each(function(){ $(this).css({ cursor: "pointer"}) .click(function(){TINY.box.show($(this).outer(),0,0,0,1)}); }); })
在上面脚本中，需要注意的是：当获取到每个image对象后，在调用模态框方法时，需使用image对象的html代码作为第一个参数。不巧的是，jquery中并没有这样一个方法，可以将某个element对象转换为其html代码串，上面定义的outer方法则是为实现该功能而写的（感谢蓝色理想论坛上朋友友情帮助）。
永久链接 : http://css9.net/tinybox-extension/
有话要说