对 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 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python 2与Python 3版本和编码的对比
2017/02/14 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
Python 音频生成器的实现示例
2019/12/24 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
餐饮加盟计划书
2014/01/10 职场文书
共产党员公开承诺书
2014/03/25 职场文书
个人求职信范文
2014/05/24 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers