一款经典的 jQuery Lightbox 灯箱效果
2024-09-28 21:42:16
使用方法
载入 CSS 文件
- <link rel="stylesheet" href="lightbox.css">
复制
载入 JavaScript 文件
<script src="jquery.js"></script>
<script src="lightbox.js"></script>
复制
DOM 结构
<a href="image-1.jpg" data-lightbox="image-1" data-title="文字说明">Image #1</a>
<!-- 如果是一组相关的图片,可以对该组图片设置 data-lightbox 属性为相同的值。-->
<a href="img/image-2.jpg" data-lightbox="group">Image #2</a>
<a href="img/image-3.jpg" data-lightbox="group">Image #3</a>
<a href="img/image-4.jpg" data-lightbox="group">Image #4</a>
复制
以上内容设置好即可,会自动调用 Lightbox。
使用说明
名称 | 描述 |
---|---|
<a> | 链接 |
<area> | 图像映射区域 |
名称 | 说明 |
---|---|
rel | 值以 "lightbox" 为开头时,表示需要使用 Lightbox 展示 |
data-lightbox | 设置任意值时,表示需要使用 Lightbox 展示 |
title | Lightbox 展示时,显示的标题或说明文字 |
data-title | |
href | Lightbox 展示时,显示的图片 |
参数说明
注意:目前除了修改源码,不能在调用的时候修改参数(因为是自动调用的,并且参数没有暴露到外部),期待以后的更新能完善该功能。
名称 | 默认值 | 说明 |
---|---|---|
fadeDuration | 500 | 透明效果过渡时间 (ms) |
fitImagesInViewport | true | 根据窗口大小自动调整图片尺寸 |
resizeDuration | 700 | 尺寸变化效果过渡时间 |
positionFromTop | 50 | 与顶部的距离 (px) |
showImageNumberLabel | true | 显示页码标签 |
alwaysShowNavOnTouchDevices | false | 在触摸设备上始终显示上下页按钮 |
wrapAround | false | 持续显示上下页按钮 |
最新文章
- 【那些年关于java多态应用】
- 12月8日phpcms添加子栏目后的读取
- sql 函数 汉字转拼音
- 安卓APP关于切图标
- 通过pinyin4j.jar将(汉字拼音混合字符串)转化成字母首字母
- Java小程序--抓取emai
- 使用Innosetup制作安装包的一些技巧
- 干净的卸载Oracle
- httpClient多线程请求
- 搭建XMPP协议,实现自主推送消息到手机
- Android界面的View以及ViewGroup的区别
- you need to be root to perform this command linux
- HTML5 Canvas Arc Tutorial
- c#中控制不能从一个case标签贯穿到另一个case标签
- qt中的事件机制
- 用phpcms切换中英文网页的方法(不用解析二级域名)、phpcms完成pc和手机端切换(同一域名)
- edge
- windows openssh 设置root 目录
- shiro课程的学习
- 终于知道什么情况下需要实现.NET Core中的IOptions接口
热门文章
- PAT第二次上机题目
- Oracle 12c Windows安装、介绍及简单使用(图文)
- 01_DllZZ.cpp
- [原][译][lua][luabridge]一个简单的luabridge与c++例子结合例子
- android 开发 出错
- Python -- Json 数据编码及解析
- 快速搭建一个简易的KMS 服务
- Ant Man CodeForces - 704B (图论,贪心)
- hdu-2147-博弈
- UVA-10163 Storage Keepers (0-1背包)