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 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python中的True,False条件判断实例分析
2015/01/12 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python 图像平移和旋转的实例
2019/01/10 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
外企求职信范文分享
2013/12/31 职场文书
大学新生欢迎词
2014/01/10 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
商场营业员岗位职责
2015/04/14 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL