对 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 相关文章推荐
JavaScript 事件的一些重要说明
Oct 25 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
JS清除选择内容的方法
Jan 29 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
JS随机数产生代码分享
Feb 24 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 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错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python使用django获取用户IP地址的方法
2015/05/11 Python
使用python加密自己的密码
2015/08/04 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
Python列表(List)知识点总结
2019/02/18 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
python IP地址转整数
2020/11/20 Python
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
社区敬老月活动实施方案
2014/02/17 职场文书
教师工作能力自我评价
2015/03/04 职场文书
中学社团活动总结
2015/05/07 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript