jQuery Lightbox 图片展示插件使用说明


Posted in Javascript onApril 25, 2010

一、信息
原作者:Benjamin Arthur Lupton
当前版本:v1.3.7最终版
发布日期:2009年4月25日
项目地址:http://jquery.com/plugins/project/jquerylightbox_bal
翻译编辑:张鑫旭(zhangxinxu)

二、安装
在您页面的头部head中嵌入如下如下代码链接必须的JavaScript文件。 <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.packed.js"></script>

前面一个JavaScript文件表示JavaScript库,后面一个是lightbox插件。这里的链接路径根据您的实际情况进行修改。

三、帮助
如果您在使用过程中遇到一些问题无法解决,可以去这里http://plugins.jquery.com/project/issues/jquerylightbox_bal,可能会对您有所帮助。
四、参数

参数名 描述 参数值
show_helper_text 是否显示一些提示文本,例如“点击关闭”等 true(默认,显示), false(不显示)
show_info 是否显示图片的信息 "auto"(默认)- 要鼠标经过才会自动显示, true - 强制显示
show_extended_info 是否显示图片扩展的些信息 "auto"(默认)- 要鼠标经过才会自动显示, true - 强制显示
download_link 是否显示图片下载的链接 true(默认,显示), false(不显示)
auto_resize 是否在图片尺寸过大时进行大小限制 true(默认,限制), false(不限制)
colorBlend 是否支持colorBlend(颜色混合) null(默认)- 仅当colorBlend检测到时可用, true - 导入colorBlend且使可用, false - 不支持colorBlend
ie6_support 是否支持IE6浏览器 true(默认,支持), false(不支持)
ie6_upgrade 是否给IE6用户显示升级提示信息 true(默认,显示), false(不显示)
show_linkback 是否显示右上角的方向链接 true(默认,显示), false(不显示)
auto_scroll 如何对滚动进行处理 "follow"(默认)- 与用户一致, "disabled" - 不允许滚动, "ignore" - 忽略滚动(让lightbox停留在其最初的位置上)
speed 每次图片转换过渡的时间(毫秒) 400(默认), integer(整数)
baseurl 要使用的基本路径用来自动导入需要的文件 null(默认)- 自动检测, string - 要手动添加的基本路径
files JavaScript中链接调用的一些文件,在这些文件(CSS、图片等)重命名时使用 Children: js.lightbox, js.colorBlend, css.lightbox, images.prev, images.next, images.blank, images.loading
text JavaScript中包含的一些文字,在您要翻译的时候使用 Children: image, of, close, closeInfo, download, help.close, help.interact, about.text, about.title, about.link
keys JavaScript文件中包含的些快捷键,在您想重新定义快捷键的时候使用 Children: close, prev, next
opacity 覆盖背景层的透明度 0.9(默认,90%的透明度), 数值
padding 图片四周的padding值 null(默认)- 自动检测, integer - padding的整数值
rel 链接上要搜寻的rel值,用以应用lightbox效果 "lightbox"(默认)- 默认搜寻rel="lightbox", string - 应该搜寻的rel字符串
auto_relify 是否对rel进行一个初始化的扫描自动检测lightboxes true(默认), false
五、参数的应用
有两个方法使用这些参数:一是通过js链接,而是通过js代码。例如下面的例子,分别用着两个方法将JavaScript文件中的反向链接隐藏同时将文件中的“图片”文字改成“照片”。
1. 链接修改法
<script type="text/javascript" src="js/jquery.lightbox.min.js?show_linkback=false&text.image=Photo"></script>

2. 代码修改法(construct)
<script type="text/javascript" src="jquery_lightbox/js/jquery.lightbox.packed.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$.Lightbox.construct({ 
show_linkback: false, 
text: { 
image: '照片' 
} 
}); 
});</script>

在线演示地址 http://demo.3water.com/js/jquery_lightbox/index.html
打包下载地址 https://3water.com/jiaoben/26042.html

Javascript 相关文章推荐
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
Node 模块原理与用法详解
May 13 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
jQuery 表格工具集
Apr 25 #Javascript
基于JQuery.timer插件实现一个计时器
Apr 25 #Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 #Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 #Javascript
Javascript中的相等与不等运算
Apr 25 #Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 #Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 #Javascript
You might like
写出高质量的PHP程序
2012/02/04 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
php防止用户重复提交表单
2015/11/02 PHP
详解js异步文件加载器
2016/01/24 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
JavaScript中的数学运算介绍
2014/12/29 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
python之拟合的实现
2019/07/19 Python
Opencv求取连通区域重心实例
2020/06/04 Python
python函数超时自动退出的实操方法
2020/12/28 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
优秀教师事迹简介
2014/02/02 职场文书
企业内部培训方案
2014/02/04 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
四风问题对照检查材料
2014/09/22 职场文书
科技活动总结范文
2015/05/11 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书