简介
blueimp-gallery 是一个基于 jQuery 的图片/视频轮播插件，可以用于展示一组图片或者视频，支持缩放、滑动、键盘控制等功能。它的优点在于易于使用和扩展，支持多种主题样式和自定义事件等。
安装
安装 blueimp-gallery 最简单的方法是通过 npm 包管理器进行安装。
--- ------- ---------------
使用
在 HTML 文件中引入 blueimp-gallery 相关的 CSS 和 JavaScript 文件，并创建一个图片列表：
---- -- --------------- -- ---
----- ---------------- ----------------------------------------------------------------
---- -- ------ - --------------- -- ---
------- ------------------------------------------------------
------- -----------------------------------------------------------------------------
---- ---- ---
---- -----------
-- ---------------------- ------------ ---
---- -------------------------------- ---------- ---
----
-- ---------------------- ------------ ---
---- -------------------------------- ---------- ---
----
-- ---------------------- ------------ ---
---- -------------------------------- ---------- ---
----
------然后在 JavaScript 中初始化 blueimp-gallery 插件：
-- --- --------------- --
------------------------- ---- -
---------- -------------------
--------- -----
--------------- -----
------------------ -----
-------------- -----
------------- -----
------------------ -----
--------- -------- -- -
-------------------- ---------
--
--------- -------- -- -
-------------------- ---------
-
---参数
blueimp.Gallery() 方法接受两个参数：一个 jQuery 对象和一个配置对象。配置对象可以包含以下属性：
- container：插件的容器元素选择器，默认为 body 元素。
- carousel：是否开启轮播模式，默认为 false。
- startSlideshow：是否自动开始轮播，默认为 false。
- slideshowInterval：轮播间隔时间，单位为毫秒，默认为 5000。
- closeOnEscape：是否支持按 Esc 键关闭插件，默认为 true。
- closeOnClick：是否支持点击插件外部区域关闭插件，默认为 true。
- closeOnSlideClick：是否支持点击幻灯片区域关闭插件，默认为 false。
- onopened：插件打开时的回调函数。
- onclosed：插件关闭时的回调函数。
更多配置项可以在官方文档中查看。
示例代码
下面是一个完整的 blueimp-gallery 的使用示例：
--------- -----
----- ----------
------
----- ----------------
---------------------- ------------
---- -- --------------- -- ---
----- ---------------- ----------------------------------------------------------------
---- -- ------ - --------------- -- ---
------- ------------------------------------------------------
------- -----------------------------------------------------------------------------
-------
------
---- ---- ---
---- -----------
-- ---------------------- ------------ ---
---- -------------------------------- ---------- ---
----
-- ---------------------- ------------ ---
---- -------------------------------- ---------- ---
----
-- ---------------------- ------------ ---
---- -------------------------------- ----------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------