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实现划词标记+划词搜索功能
Mar 06 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
JS如何生成随机验证码
Mar 02 Javascript
js实现时钟定时器
Mar 26 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
js 目录列举函数
2008/11/06 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python松散正则表达式用法分析
2016/04/29 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
替换python字典中的key值方法
2018/07/06 Python
python导入pandas具体步骤方法
2019/06/23 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
用Python开发app后端有优势吗
2020/06/29 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
美术社团活动总结
2014/06/27 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
升职自我推荐信范文
2015/03/25 职场文书
幼儿园见习总结
2015/06/23 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书