npm 包 blueimp-gallery 使用教程

阅读时长 5 分钟读完

简介

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 的使用示例:

-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  ---------------------- ------------

  ---- -- --------------- -- ---
  ----- ---------------- ----------------------------------------------------------------

  ---- -- ------ - --------------- -- ---
  ------- ------------------------------------------------------
  ------- -----------------------------------------------------------------------------
-------
------

---- ---- ---
---- -----------
  -- ---------------------- ------------ ---
    ---- -------------------------------- ---------- ---
  ----
  -- ---------------------- ------------ ---
    ---- -------------------------------- ---------- ---
  ----
  -- ---------------------- ------------ ---
    ---- -------------------------------- ----------

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
纠错
反馈