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+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
Express框架之connect-flash详解
May 31 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 Javascript
详解JavaScript原型与原型链
Nov 16 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源代码数组统计count分析
2011/08/02 PHP
PHP数组实例总结与说明
2011/08/23 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
jQuery实现跨域
2015/02/03 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
vuejs实现下拉框菜单选择
2020/10/23 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
Python列表推导式实现代码实例
2020/09/09 Python
python利用线程实现多任务
2020/09/18 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
UNIX文件系统分类
2014/11/11 面试题
运动会表扬稿大全
2014/01/16 职场文书
硕士生工作推荐信
2014/03/07 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
大一学生个人总结
2015/02/15 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技