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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
JS 创建对象(常见的几种方法)
Nov 03 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
微信小程序 搜索框组件代码实例
Sep 06 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模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
python反转列表的三种方式解析
2019/11/08 Python
python创建子类的方法分析
2019/11/28 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
银行简历自我评价
2014/02/11 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
《假如》教学反思
2014/04/17 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
街道务虚会发言材料
2014/10/20 职场文书
法院个人总结
2015/03/03 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
V Rising 服务器搭建图文教程
2022/06/16 Servers