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 相关文章推荐
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
vue-router 学习快速入门
Mar 01 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 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/15 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python实现单链表的方法示例
2019/09/03 Python
python实现从wind导入数据
2019/12/03 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
为什么说python适合写爬虫
2020/06/11 Python
浅谈Python 参数与变量
2020/06/20 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
网络技术支持面试题
2013/04/22 面试题
优秀教师先进事迹
2014/01/22 职场文书
外国人聘用意向书
2014/04/01 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
试用期自我评价范文
2015/03/10 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python