Page 46 - JavaScript修炼之道

34 第三部分 UI技巧

任务 15 创造光箱特效

光箱效果指的是突出显示出一部分内容，同时用屏蔽单击的重叠层暗化页面其余内容的操
作。光箱一般显示在页面中央，通常是图片，由页面上的文本或缩略图链接触发，如下图所示。

本书的例子中，我们通过Janis Skarnelis的FancyBox jQuery插件来实现把缩略图放大成原始图
片的光箱效果。这个插件很友好，比较轻便，也易于插入，而且看上去异常绚丽。但如果你有兴
趣的话，也不妨看一下这个demo的页面底部列出的别的实现方式。

FancyBox不只限于显示图片，实际上它能显示任何内容，甚至是 <iframe> 。如果链接的目
标URI看上去既“不像图片文件”也没用iframe，它会默认用即时Ajax载入，比如，可以通过不
带扩展名的URL来按需载入较大的图片。

和大多数UI相关的库相似，FancyBox需要载入至少各一个JS文件和CSS文件。它会假设自己
需要用的图片和CSS文件放在在同一目录下，以免去调整CSS的麻烦。 FancyBox对光箱图片的
URL没有要求。

要把链接做成光箱，只需要选取那些链接，然后调用它们的fancybox()方法，正如右页的
代码所示。既可以不带参数直接调用该方法，也可以传入参数来对一些选项进行设置。我希望看
到缩略图动态放大到原始大小，因此就做了相应的设置。