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 相关文章推荐
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
JavaScript中的几种继承方法示例
Dec 06 Javascript
用javascript制作qq注册动态页面
Apr 14 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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
Syphon 使用方法
2021/03/03 冲泡冲煮
php实现微信公众号主动推送消息
2015/12/31 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
django 自定义过滤器的实现
2019/02/26 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python 字符串追加实例
2019/07/20 Python
Python中Selenium模块的使用详解
2020/10/09 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
创联软件面试题笔试题
2012/10/07 面试题
个人找工作自荐信格式
2013/09/21 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
生产设备维护保养制度
2015/08/06 职场文书