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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
JavaScript Array扩展实现代码
Oct 14 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
JavaScript Array对象详解
Mar 01 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
jQuery实现日历效果
Sep 11 jQuery
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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
thinkphp分页集成实例
2017/07/24 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
javascript比较文档位置
2008/04/08 Javascript
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
Highcharts入门之简介
2016/08/02 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
Python运算符重载用法实例
2015/05/28 Python
python中的set实现不重复的排序原理
2018/01/24 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
python实现三壶谜题的示例详解
2020/11/02 Python
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
语文教育专业应届生求职信
2013/11/23 职场文书
节能宣传周活动总结
2014/05/08 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python