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 相关文章推荐
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
JS函数本身的作用域实例分析
Mar 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
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
PHP云打印类完整示例
2016/10/15 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
vue中使用props传值的方法
2019/05/08 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
Python实现端口复用实例代码
2014/07/03 Python
python开发之list操作实例分析
2016/02/22 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
python检测服务器端口代码实例
2019/08/31 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
电子商务专员岗位职责
2013/12/11 职场文书
2014年自我评价
2014/01/04 职场文书
小学领导班子对照材料
2014/08/23 职场文书
独生子女证明范本
2015/06/19 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL