介绍
uniweb-lightbox2 是一个优秀的基于 jQuery 和Bootstrap 的响应式图片展示插件，支持图片预览、缩放、旋转等多种功能。适用于自适应网站、Bootstrap 网站、手机网站等多种类型的网站。
安装
使用 npm 安装 uniweb-lightbox2：
--- ------- ---------------- ------
或者在 HTML 中引用：
----- ---------------- ----------------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------------------
使用
启用 uniweb-lightbox2 的方式有两种：
- 添加
data-toggle="lightbox"属性到a标签上：
-- ---------------------------- ---------------------- ---------------- ---
---- ------------------------------- ---------- ---
----- 使用 JavaScript 手动启用：
-- ------------ ---------------------------- ---------------- ---
---- ------------------------------- ---------- ---
----
--------
----------------------- ----------- -------- -- -
--------------------- -
------ --------------------------
---
---
---------配置项
uniweb-lightbox2 支持多个配置项：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| title | string | '' | 图片标题，将显示在弹出层上部 |
| zoom | boolean | true | 是否支持缩放 |
| rotate | boolean | true | 是否支持旋转 |
| fullScreen | boolean | false | 是否支持全屏 |
| download | boolean | false | 是否支持下载 |
| closeButton | boolean | true | 是否显示关闭按钮，若为 false 则不显示背景图 |
| widthRatio | number | 0.8 | 弹出层宽度与视口宽度之比，取值范围 [0, 1] |
| heightRatio | number | 0.9 | 弹出层高度与视口高度之比，取值范围 [0, 1] |
示例
创建一个网格布局的图片列表：
---- ------------
---- -----------------
-- ------------------------------ ---------------------- ---------------- ---
---- --------------------------------- ---------- ---
----
------
---- -----------------
-- ------------------------------ ---------------------- ---------------- ---
---- --------------------------------- ---------- ---
----
------
---- -----------------
-- ------------------------------ ---------------------- ---------------- ---
---- --------------------------------- ---------- ---
----
------
------配置缩放、旋转、下载
----------------------- ----------- -------- -- -
--------------------- -
------ ---------------------------
----- -----
------- -----
--------- ----
---
---全屏显示
----------------------- ----------- -------- -- -
--------------------- -
------ ---------------------------
----------- ----
---
---定制宽度和高度
----------------------- ----------- -------- -- -
--------------------- -
------ ---------------------------
----------- ----
------------ ---
---
---总结
uniweb-lightbox2 是一款非常实用的图片展示插件，在响应式和自适应网站中发挥着巨大的作用。本文详细介绍了它的安装、使用和配置，希望能够对前端开发人员有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ea481e8991b448dc07f