Photoswipe 是一个用于 web 端图片浏览的精简、自适应、完全开源的 JS 库。并且它具有轻量级、易于使用、可扩展等特点，适用于移动端和 PC 端浏览器。而在 npm 上有一个对应的 photoswipe-demo 包，方便了前端开发者的使用。在本文中，我们将详细介绍如何使用 photoswipe-demo 包，以及一些常见用法。
安装 photoswipe-demo
在使用 photoswipe-demo 前，需要先安装该 npm 包。在终端或命令行工具中输入以下命令即可：
npm install photoswipe-demo --save
使用 photoswipe-demo
使用 photoswipe-demo 有两种方法，一种是通过 script 标签直接引入 photoswipe.js 和 photoswipe-ui-default.js，然后在 HTML 中使用标准的 photoswipe 结构进行初始化，第二种是通过 npm 包的方式，使用 common.js 或者 es6 module 来进行引用。
第一种方法
引入文件
首先，需要在 HTML 中引入 photoswipe.js 和 photoswipe-ui-default.js 这两个文件：
<link rel="stylesheet" href="path/to/photoswipe.css"> <link rel="stylesheet" href="path/to/default-skin.css"> <!-- photoswipe js --> <script src="path/to/photoswipe.min.js"></script> <script src="path/to/photoswipe-ui-default.min.js"></script>
初始化结构
然后，通过 HTML 将需要展示的图片包括在 photoswipe 等容器中：
-- -------------------- ---- -------
---- ------------ ------------- ------------- -------------------
---- -----------------------
---- ------ ------- ---- ---------------- ---
---- --------------------------
---- --------- ---- ----- ------- ---------- ----- ---- - ------ -- --- -- ---- ------- ---
---- ------------------------
---- -------------------------
---- -------------------------
---- -------------------------
------
---- ------- ---------------------- --------- -- --- -- ------- ----- --- -- -------- ---
---- --------------- ------------------
---- ----------------------
---- -------- --- ----------------- ----- --- -- -------- ---
---- ----------------------------
------- ------------------- -------------------- ------------ ----------------
------- ------------------- -------------------- -----------------------
------- ------------------- ----------------- ------------- ---------------------
------- ------------------- ------------------- ----------- -----------------
---- --------- ---- --------------------------------------- ---
---- ------- ---- --- ----- ----------------------- ---- --------- -- ------- ---
---- ------------------------
---- -----------------------------
---- -----------------------------
---- -------------------------------------
------
------
------
------
---- ------------------------ ------------------------- ------------------
---- ----------------------------------
------
------- ------------------- -------------------------- --------------- ------ -------
---------
------- ------------------- --------------------------- ----------- ------ --------
---------
---- ----------------------
---- ------------------------------------
------
------
------
------
---- -------------------
---- --------- ---
--------
-- ------------------------ --------------------
---- ----------------------- ---------- ---------
----
----------------- --------------------
---------
---- - --- -------- ---
--------
---- ----------------------- ---------------------------------- --------------------
----------------- --------------------
---------
------
初始化 photoswipe
接下来在 script 中进行以下初始化设置：
-- -------------------- ---- -------
-- ------
--- ----- - -
-
---- ---------------------
-- -----
-- ----
------ ------ --
--
-
---- ---------------------
-- -----
-- ----
------ ------ --
--
-
---- ---------------------
-- -----
-- ----
------ ------ --
--
--
-- ----
--- -------------- - --------------------------------------
-- ----
--- ------- - -
------ - -- ---------------
--
-- -- ---------- -------- ----------
--- ------- - --- ----------- --------------- --------------------- ------ ---------
---------------第二种方法
在按照第一种方式引入时，容易出现一些问题，特别是在引入多个模块的情况下，常常会出现命名冲突等问题。所以我们推荐使用第二种方式进行调用。现在很多前端工程化的构建工具都已经支持 es6 module 和 common.js 的方式，所以安装 photoswipe-demo 包后，就能直接引入。
-- -------------------- ---- -------
--- ---------- - ----------------------
--- -------------------- - -------------------------------------------------
-- ------
--- ----- - -
-
---- ---------------------
-- -----
-- ----
------ ------ --
--
-
---- ---------------------
-- -----
-- ----
------ ------ --
--
-
---- ---------------------
-- -----
-- ----
------ ------ --
--
--
-- ----
--- -------------- - --------------------------------------
-- ----
--- ------- - -
------ - -- ---------------
--
-- -- ---------- -------- ----------
--- ------- - --- ----------- --------------- --------------------- ------ ---------
---------------API 文档
正如上文中提到的，photoswipe-demo 具有完全的 api 接口，不同的参数可以完成不同的功能。接下来，我们列举一些比较常用的 api：
bgOpacity设置背景透明度（默认是 0.8）。closeOnVerticalDrag垂直滑动是否可以关闭（默认是 true）。closeOnScroll页面滚动是否可以关闭（默认是 true）。history是否启用历史记录管理器（默认是 true）。pinchToClose缩放时是否可以关闭（默认是 true）。captionEl是否显示图片描述（默认是 true）。fullScreenEl是否开启全屏模式（默认是 true）。tapToClose是否可以通过点击屏幕来关闭（默认是 false）。clickToCloseNonZoomable是否只对缩放后的图片可以关闭（默认是 false）。showAnimationDuration打开图片的动画持续时间（默认是 333ms）。hideAnimationDuration关闭图片的动画持续时间（默认是 333ms）。
小结
在本文中，我们讲解了如何使用 npm 包 photoswipe-demo 进行前端开发中的图片浏览。我们介绍了两种使用 photoswipe-demo 的方式，分别是通过 script 标签和 npm 包。同时，我们也列举了一些 photoswipe-demo 的 api 接口。希望本文对于前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005589e81e8991b448d5e53