对 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 相关文章推荐
Jquery获取当前城市的天气信息
Aug 05 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
老生常谈ES6中的类
Jul 31 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
PHP IPV6正则表达式验证代码
2010/02/16 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Python根据服务获取端口号的方法
2019/09/25 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
网络安全类面试题
2015/08/01 面试题
python re模块和正则表达式
2021/03/24 Python
策划助理岗位职责
2013/11/18 职场文书
小学教师师德感言
2014/02/10 职场文书
2014年工程工作总结
2014/11/25 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
python标准库ElementTree处理xml
2022/05/20 Python
MySQL深分页问题解决思路
2022/12/24 MySQL