jQuery lightBox 灯箱效果图片展示插件 - 文章教程

jQuery lightBox 灯箱效果图片展示插件

发布于 2020-09-04 字数 3040 浏览 1374 评论 0

Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本,就是一个页面上的弹出式对话框的组件,它能被快速安装并且运作于所有流行的浏览器,而 JQuery Lightbox 是在 jQuery 框架的基础上实现版本。

jQuery lightBox 灯箱效果图片展示插件

使用方法

载入 CSS 文件

<link rel="stylesheet" href="jquery.lightbox-0.5.css">

载入 JavaScript 文件

<script src="jquery.js"></script>
<script src="jquery.lightbox-0.5.js"></script>

DOM 结构

<div id="element_id">
  <a href="image3.jpg" title="文字说明"><img src="thumb_image3.jpg" width="72" height="72"></a>
</div>

调用 lightBox

$('#element_id a').lightBox();
// lightBox 的使用范围是根据 jQuery 选择器来设置的,所以可以有更多的设置方法,例如:
$('a.lightbox').lightBox();
$('a[@rel*=lightbox]').lightBox();

参数说明

名称 默认值 说明
overlayBgColor ‘#000’ 背景色
overlayOpacity 0.8 背景色透明度
fixedNavigation false 是否始终显示上一张、下一张按钮
imageLoading ‘images/lightbox-ico-loading.gif’ 加载图片时显示的图片
imageBtnPrev ‘images/lightbox-btn-prev.gif’ 上一张按钮的图片
imageBtnNext ‘images/lightbox-btn-next.gif’ 下一张按钮的图片
imageBtnClose ‘images/lightbox-btn-close.gif’ 关闭按钮的图片
imageBlank ‘images/lightbox-blank.gif’ 上一张、下一张按钮周围空白部分的图片(默认透明)
containerBorderSize 10 展示图片的边框宽度
containerResizeSpeed 400 展示过程切换的速度
txtImage ‘Image’ 页码辅助文字
txtOf ‘of’ 页码辅助文字
keyToClose ‘c’ 关闭展示的快捷键
keyToPrev ‘p’ 上一张的快捷键
keyToNext ‘n’ 下一张的快捷键

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论