使用方法
载入 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 | 持续显示上下页按钮 |
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/36015.html
