介绍
reactive-blueimp-gallery 是一个基于 blueimp-gallery 提供了响应式交互的 npm 包，用于在网页上显示图片和视频文件集合。和 blueimp-gallery 一样，reactive-blueimp-gallery 支持图片和视频的展示、图片和视频的轮播播放等功能。此外，reactive-blueimp-gallery 还提供了针对不同尺寸屏幕的响应式设计，可以在不同屏幕下自适应展示。
安装
使用 npm 进行安装：
npm install reactive-blueimp-gallery --save
使用
通过 require 或者 import 引入 reactive-blueimp-gallery：
// Using CommonJS
const ReactiveBlueimpGallery = require('reactive-blueimp-gallery');
// Using ES6
import ReactiveBlueimpGallery from 'reactive-blueimp-gallery';使用 ReactiveBlueimpGallery.loadGallery() 函数加载图片集合：
-- -------------------- ---- -------
----- ------ - -
-
------ ------ ---
----- ----------------------
----- -------------
---------- ---------------------
--
-
------ ------ ---
----- ----------------------
----- -------------
---------- ---------------------
-
--
----- ------- - -
------------ ----------
------------- -----
----------- -----
-------------- -----
---------- -----
-------------- -----
-------------- ---------- -
-------------------- ----------
-
--
------------------------------------------ ---------options
ReactiveBlueimpGallery.loadGallery() 函数接受一些选项参数，用于控制图片集合的展示。
- containerId (string，必须)：指定容器元素的 ID 值，图片集合会被加载到这个元素中。
- useBootstrap (boolean，可选)：开启 Bootstrap 样式，默认为 false。
- fullScreen (boolean，可选)：是否允许点击图片全屏展示，默认为 true。
- videoAutoPlay (boolean，可选)：是否自动播放视频文件，默认为 false。
- videoLoop (boolean，可选)：是否循环播放视频文件，默认为 false。
- videoMaxWidth (integer，可选)：视频文件的最大宽度，用于在自适应响应式设计中控制视频大小，默认为 1000。
- onGalleryOpen (function，可选)：当图片集合被打开时执行的回调函数。
示例
以下示例代码展示了如何使用 reactive-blueimp-gallery 在页面中加载一个图片集合：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------- ------- ------------
----- ---------------- ------------------------------------------------------------------------------------------------ --
----- ---------------- ------------------------------------------------------------------------------------------------------ --
-------
------
---- ------------------
------------ ------- ------- ---------
---- -------------------
------
------- --------------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------
--------
----- ------ - -
-
------ ------ ---
----- ------------------------
----- -------------
---------- ---------------------------
--
-
------ ------ ---
----- ------------------------
----- -------------
---------- ---------------------------
--
-
------ ------ ---
----- ------------------------
----- ------------
------- -------------------------
---------- ---------------------------
-
--
----- ------- - -
------------ ----------
------------- -----
----------- -----
-------------- -----
---------- -----
-------------- -----
-------------- ---------- -
---------------- ------- -- ----------
-
--
------------------------------------------ ---------
---------
-------
-------总结
使用 reactive-blueimp-gallery，我们可以方便地在网页上展示图片和视频文件集合，并支持图片和视频的轮播、响应式自适应设计等功能。同时，通过选项参数可以灵活控制图片集合的行为和样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600c81e8991b448dddc7