分享：MagicBox - 展示一组图片的新控件

最近做了一个新的图片展示控件，用于正在进行的项目，具备如下功能：
1. 同时展示多张图片：可以一次展示任意多张图片
2. 可以选择全屏浏览模式 : 普通状态下，控件只占据页面的一小块空间，但用户可以点一个按钮进行全屏浏览，达到影院级的浏览效果，也可以随时推出全屏模式。在任何模式下，操作方式一样，并且图片自动适应浏览窗口大小
3. 多种操作方式：可以使用鼠标，也可以通过键盘操作
3. 更快的显示网页：页面中不含有图片信息，控件分析页面后，异步加载后台图片，所以页面可以更快一点的显示
4. 更容易的使用: 如果要展示10张图片，那么只需要在页面中写12行html代码，10行告诉控件怎么取图片，2行是外层的<div>标签，余下的事全部由控件完成，（包括自动初始化，创建界面，与用户交互）。
我将这个控件命名为MagicBox。

测试：IE6,IE7,FireFox2, Opera
使用：
1. 下载magicbox代码压缩包（里面包含几张较大的演示图片，所以大了一些）
2. 解压缩代码包，得到如下文件：
* magicbox
      o css : 包含magicbox.css, 用于页面布局
      o image : 包含一些MagicBox需要使用的图片
      o js : 包含magicbox.js，是MagicBox脚本文件
      o lib : 包含prototype和scriptaculous库文件
另外还有一个测试页面。
3. 在html页面中，包含MagicBox需要的css和javascript文件：
<link rel="Stylesheet" type="text/css" href="magicbox/css/magicbox.css"/>
<script language="javascript" src="magicbox/lib/prototype.js"></script>
<script language="javascript" src="magicbox/lib/effects.js"></script>
<script language="javascript" src="magicbox/lib/utility.js"></script>
<script language="javascript" src="magicbox/js/magicbox.js"></script>
4. 在html页面中，编写类似代码:
<div class="magicbox" width="400" height="300">
    <span src="image_1.jpg"/>
    <span src="image_2.jpg"/>
    ...
    <span src="image_n.jpg"/>
</div>
只要定义了这样的html代码，包含了需要的文件，控件自己会在页面加载之后自动初始化，完成所有的工作。

由于压缩包中包含了几张较大的演示图片，大小超过500K, 无法在论坛中上传，不过可以看这里: http://magicboxcn.kingyar.com/，可以下载代码压缩包，另外页面左边的Demo展示了4张图片，页面中只使用了6行html代码。

感兴趣的朋友可以试一下，如果发现问题，请告诉我，不胜感谢！如果喜欢，你可以将它用于自己的项目，否则请一笑了之。