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中yield实用简洁实现方式
Jun 12 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 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 Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
JavaScript基本对象
2007/01/11 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
python多重继承新算法C3介绍
2014/09/28 Python
详解python的数字类型变量与其方法
2016/11/20 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
学生实习自我鉴定
2013/10/11 职场文书
军训心得体会
2013/12/31 职场文书
委托公证书
2014/04/08 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
计算机教师工作总结
2015/08/13 职场文书
任命书格式模板
2015/09/22 职场文书
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js