2009-6
3
前不久曾发表过一篇介绍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方法则是为实现该功能而写的（感谢蓝色理想论坛上朋友友情帮助）。
延伸阅读:
- 通过javascript实现的轻量级模态框解决方案（支持Ajax）
- 实现页面不同位置间平滑滚动的两种解决方案
- 通过javascript实现table表格排序分页功能
- Jquery Tools——不可错过的Jquery UI库（四）
- Jquery Tools——不可错过的Jquery UI库（三）
- 强大的Jquery图表绘制插件 —— jqPlot
- 简洁易用的html编辑器——TinyEditor
- 使用jQuery及Bing API实现简易搜索引擎
版权声明：
本站内容受著作权法保护。个人网站、blog转载时请遵循 “署名-非商业用途-保持一致” 的创作共用协议；商业网站或媒体未授权不得复制本站内容。
友情提示：
如对本文有任何疑问，或在示例的使用中遇到问题，或有好的建议，欢迎在下面留言共同学习，有问必答。
感谢IIduce大哥给的解决办法，tinybox是个很好的灯箱效果js，小巧而强大。另外在你这里学到很多，再次感谢。呵呵
客气了，解决问题的过程我也能学到不少。
感谢关注CSS9.NET，偶会继续努力。
这个感觉还可以
不过，感觉还是shadowbox要好一些
这个网站给我感觉太好了，有很多漂亮的效果可以在网页上实现了
过奖了
感谢关注
这个框架的确还是可以，不过还没有成熟啊。
我在应用中遇到以下问题：
1、怎么利用tiny-box做页面间相互传值
如：我在a.html中使用tiny-box.js库，b.html中文本框需要a.html传递参数过去给它填充值，而 b.html通过传递过来的值，运算处理后 又传递给a.html页面中去，并输出结果，像这样的情况，tiny-box很困难做到
2、 在使用tiny-box给ajax子页面指定宽度和高度时，出现了误差
如：T$(’testclick1′).onclick = function(){TINY.box.show(’box.jsp’,1,500,500,1)}
这段代码在指定的子页面宽度：500 和高度：500时，出错了。我的子页面中的div样式根本就没有用到。而且高度还超出了500，甚至连黑色背景也超出了
如果有朋友高过以上这样的技术，请相互交流，学习。非常感谢博主提供的技术啊
望各界有志朋友加我好友，望各界技术朋友加我好友
我的QQ：659633838
不用传值 直接把js方法写在a.html中 b.html中可以掉a.html中的js方法 本质他们就在一个页面 不存在传值问题
如果我想把效果应用在上，应该怎么弄？
如果我想把效果应用在a标签上，应该怎么用？
应用在任何标签上都是可以的，只需要找到相应节点即可。如果是a标签，可如下做：
html代码：
<a href=”javascript:void(0);” id=”testclick”>链接</a>
js代码：
T$(’testclick’).onclick = function(){TINY.box.show(content3,0,0,0,0,3)}
tinybox是个很好的灯箱效果
不过好像灯箱效果中显示的内容是中文就不行
显示的中文信息乱码
怎么解决？
博主你好，我想请教一下，
如果，我想在页面上显示小图片，而不是大图片的缩略图呢？（点击小图片，弹出大图片）
应该怎么操作？
I totally love this article. I think you could write some other things to make your blog more complete.For example： ed hardy.vibram five fingers.p90x workout schedule. mbt shoes. hardy caps. vibram fivefingers kso trek. mbt chapa dawn shoes.
ghd straightener
ugg ugg boots
replica louis vuitton handbags
edhardyI thought that many people can like.