对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明


Posted in Javascript onMarch 20, 2010

修改的 lightbox 版本是 2.04 版。
下面是使用我们在使用 lightbox 来显示图片时的基本设置:

<a href="image-url" rel="lightbox" title="image-remark"> 
content 
</a>

主要是给连接加了一个 rel="lightbox" 属性
以上面的试设置好连接时, 当点击此连接,lightbox 将会显示连接上的图片,并使用连接的 title 属性作为图片的说明,如果要为图片添加详细的图片说明,并为图片的说明设置一些格式,如字体的大小、颜色等,那么使用 title 这个属性来设置这些说明信息是没办法实现的。
由于客户一定要此功能,所以只好去查看 lightbox 的源代码,检查是否可以对其进行改造,以满足这个需要,幸运的是 lightbox 主要的代码量不是很大,而且可以对其进行一个小小的修改,就可以满足这个需要,主要是对 prototype.js 这个JS 框架不太熟悉。
以下是修改的过程 :
打开 lightbox.js 文件,原 218 行的代码为:
this.imageArray.push([imageLink.href, imageLink.title]);
可以看到这里是直接读取连接对象的 title 属性,所以我们只需要把 imageLink.title 改一下就可以了:
this.imageArray.push([imageLink.href, document.getElementById(imageLink.contentId).innerHTML]);

把 imageLink.title 改成了 document.getElementById(imageLink.contentId).innerHTML 了;
从这一句可以看出来,我们需要为连接对象设置一个 contentId 属性,这个属性的值是某个 DOM 元素的 ID 号,图片的说明就是此元素的内容了。
修改完之后就可以在 HTML 这样设置图片说明了:

<a href="image-url" rel="lightbox" contentId="imgDesc" title="image"> 
<div id="imgDesc" style="display:none">description</div> 

content 
</a>
Javascript 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
JavaScript 无符号右移赋值操作
Apr 17 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 #Javascript
js 数组克隆方法 小结
Mar 20 #Javascript
vs2003 js文件编码问题的解决方法
Mar 20 #Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 #Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 #Javascript
jQuery 前的按键判断代码
Mar 19 #Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 #Javascript
You might like
PHP添加MySQL数据记录代码
2008/06/07 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
php实现插入排序
2015/03/29 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
Node.js学习入门
2017/01/03 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
python 导入数据及作图的实现
2019/12/03 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Django之腾讯云短信的实现
2020/06/12 Python
戴尔美国官网:Dell
2016/08/31 全球购物
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
AJax面试题
2014/11/25 面试题
酒店副总岗位职责
2013/12/24 职场文书
班级学习计划书
2014/04/27 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
工伤私了协议书范本
2014/11/24 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS