基于 YUI 库实现仿关机效果的图片灯箱

基于 YUI 库实现仿关机效果的图片灯箱

首先，需要获取并下载相关的 JavaScript 资源包，下载地址为：http://thecodecentral.com/wp-content/uploads/2007/08/yuilightboxwdep.zip。在 HTML 文件的 <head> 部分，需根据下载包的实际路径引入必要的样式表和脚本文件。具体包括 YUI 的容器皮肤样式（container.css）、核心事件处理库（yahoo-dom-event.js）、拖放组件（dragdrop-min.js）以及容器组件（container-min.js），最后引入核心的 Lightbox.js 脚本。在初始化函数 init 中，首先定义一个数据源 dataSource，其格式为键值对，键为图片 ID，值包含原图路径（url）和标题（title）。例如：var dataSource = { id_1: { url: "image-big.jpg", title: '测试图片' } };。接着，创建 Lightbox 对象，传入 imageBase（指向 Lightbox.js 所在目录）和之前定义的数据源。最后，通过 YAHOO.util.Event.on 监听窗口加载事件，调用 init 函数完成初始化。在 <body> 中，添加一个预览图片，其 src 属性指向缩略图，id 属性必须与数据源中的键名一致（如 id="id_1"）。以下为去除注释的完整代码示例：<html> <head> <link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/container.css" /> <script type="text/javascript" src="js/yui/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="js/yui/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="js/yui/container/container-min.js"></script> <script type="text/javascript" src="js/lightbox/Lightbox.js"></script> <script type="text/javascript"> init = function(){ var dataSource = { id_1:{url:"image-big.jpg", title: '测试图片'} }; var lightbox = new YAHOO.com.thecodecentral.Lightbox({ imageBase:'js/lightbox', dataSource: dataSource }); } YAHOO.util.Event.on(window, 'load', init); </script> </head> <body> <img src="image-small.jpg" id="id_1"/> </body> </html>