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 confirm选择判断
Oct 18 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
JavaScript鼠标悬停事件用法解析
May 15 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
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
个人自我鉴定怎么写
2013/10/28 职场文书
微观物理专业自荐信
2014/01/26 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
网络销售员岗位职责
2015/04/11 职场文书
酒桌上的开场白
2015/06/01 职场文书
安全第一课观后感
2015/06/18 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
Python中super().__init__()测试以及理解
2021/12/06 Python