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 Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
Angular实现form自动布局
Jan 28 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
详解js加减乘除精确计算
Mar 19 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数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
巧用canvas
2017/01/21 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
Python中分数的相关使用教程
2015/03/30 Python
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
一文读懂Python 枚举
2020/08/25 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
Django如何实现防止XSS攻击
2020/10/13 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
小组合作学习反思
2014/02/18 职场文书
前处理组长岗位职责
2014/03/01 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
三方协议书范本
2014/04/22 职场文书
十八大标语口号
2014/10/09 职场文书
三严三实学习心得体会
2014/10/13 职场文书
师德师风自查总结
2014/10/14 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL