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

修改的 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>

赞 (0)

相关推荐

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

    修改的 lightbox 版本是 2.04 版. 下面是使用我们在使用 lightbox 来显示图片时的基本设置: 复制代码 代码如下: <a href="image-url" rel="lightbox" title="image-remark"> content </a> 主要是给连接加了一个 rel="lightbox" 属性 以上面的试设置好连接时, 当点击此连接,lightbox 将会显示连接

  • 微信小程序选择图片控件

    微信小程序选择图片控件

    本文实例为大家分享了微信小程序选择图片控件的具体代码,供大家参考,具体内容如下 xml: <loading hidden="{{loadingHidden}}"> 加载中... </loading> <view class="add_carimg"> <block> <view class="load_iamge"> <text class="load_head_text

  • JS 日历控件(蓝色)

    超漂亮的JS日历控件 *{ font:12px; letter-spacing:0px; } body{ background-color:#E5E9F2; overflow:hidden; margin:0; border:0px; } #titleYear{ text-align:center; padding-top:3px; width:120px; height:20px; border:solid #E5E9F2; border-width:0px 1px 1px 0px; back

  • 基于JS分页控件实现简单美观仿淘宝分页按钮效果

    基于JS分页控件实现简单美观仿淘宝分页按钮效果

    最新版本代码请移步到https://github.com/pgkk/kkpager 在线测试链接:http://pgkk.github.io/kkpager/example/pager_test.html 分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager JS代码: Js代码 var kkpager = {

  • JS分页控件 可用于无刷新分页

    JS分页控件,可用于无刷新分页 复制代码 代码如下: function PagerBar(recordcount, pagesize, pageindex, showpagecount) {     var NumberRegex = new RegExp(/^\d+$/);     this.PageIndex = 1; //页索引,当前页     if (pageindex != null && NumberRegex.test(pageindex)) this.PageIndex =

  • 浅析js设置控件的readonly与enabled属性问题

    如何用js设置控件的readonly和enabled属性? 我试过这样设置不行,text1为<input type=text  id=text1> text1.readonly=true;       和 text1.enabled=true; 都不行,为什么??? 答案: disabled=flase;     //小写readOnly=true;     //大写

  • Android如何创建可拖动的图片控件

    Android如何创建可拖动的图片控件

    本文实例为大家分享了Android创建可拖动图片控件的具体代码,供大家参考,具体内容如下 重载.自绘 1.从View派生一个控件类 ,构造函数中调用父类构造器. 2.重载其onDraw函数,在里面绘制图片.(和windows的MFC有种似曾相识的感觉,可能安卓借鉴了windows的模式吧) 消息处理 拖动图片的消息,主要是处理按下和移动两个消息,重载onTouchEvent.数学知识(平移):在ACTION_DOWN时记录下坐标点,在ACTION_MOVE时根据当前位置与按下时的位置算出平移量.

  • C# PictureBox图片控件实现图片交换

    C# PictureBox图片控件实现图片交换

    在 Windows 窗体应用程序中显示图片时要使用图片控件 ( PictureBox ),图片的设置方式与背景图片的设置方式相似. 图片控件中常用的属性如下表所示: 图片控件中图片的设置除了可以直接使用 ImageLocation 属性指定图片路径以外, 还可以通过 Image.FromFile 方法来设置.实现的代码如下: 图片控件的名称 .Image = Image. FromFile( 图像的路径 ); [实例] 实现图片交换. Form1.cs using System; using S

  • JS日期控件My97DatePicker基本用法

    My97DatePicker是一款非常灵活好用的日期控件.使用非常简单.  1.下载My97DatePicker组件包  下载地址:https://www.jb51.net/jiaoben/18012.html 2.在页面中引入该组件js文件:  <script type="text/JavaScript" src="My97DatePicker/WdatePicker.js"></script>  3.例子 <!DOCTYPE HTM

  • 详解js树形控件—zTree使用总结

    详解js树形控件—zTree使用总结

    0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 zTree的特点 最新版的zTree将核心代码按照功能进行了分割,不需要的代码可以不用加载,如普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功能加载jquery.zt

随机推荐