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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 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中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
如何离线执行php任务
2017/02/21 PHP
php创建图像具体步骤
2017/03/13 PHP
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
Vue中使用sass实现换肤功能
2018/09/07 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
Python中统计函数运行耗时的方法
2015/05/05 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
python numpy 按行归一化的实例
2019/01/21 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
pytorch数据预处理错误的解决
2020/02/20 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
心理学专业毕业生推荐信范文
2013/11/21 职场文书
培训主管的岗位职责
2013/11/23 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
2015年仓库工作总结
2015/04/09 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers