前言
在现代web开发中，图片展示已经成为一个非常重要的需求，因此寻找一个轻量级且易用的图片展示库变得尤为重要。x-photoswipe 就是这样一个库，它麻雀虽小五脏俱全，支持多种图片展示风格，非常适合前端开发项目中的图片展示需求。
安装及使用
x-photoswipe 是一个npm包，可以使用npm或者yarn将其安装到自己的项目中。
npm install x-photoswipe --save 或 yarn add x-photoswipe
在项目中引入 x-photoswipe 的样式文件及 js 文件。
<link rel="stylesheet" href="node_modules/x-photoswipe/dist/photoswipe.css"> <script src="node_modules/x-photoswipe/dist/photoswipe.min.js"></script> <script src="node_modules/x-photoswipe/dist/photoswipe-ui-default.min.js"></script>
在需要展示图片的地方，添加一下 html 代码。
-- -------------------- ---- -------
---- ------------------ --------- ------------------------------------------
------- -------------------------- --------- -----------------------------------------
-- ------------------- --------------------- ---------------------
---- ------------------ -------------------- ---------- -- --
----
----------- ----------------- ------------------ --------------
---------
------- -------------------------- --------- -----------------------------------------
-- ------------------- --------------------- ---------------------
---- ------------------ -------------------- ---------- -- --
----
----------- ----------------- ------------------ --------------
---------
------- -------------------------- --------- -----------------------------------------
-- ------------------- --------------------- ---------------------
---- ------------------ -------------------- ---------- -- --
----
----------- ----------------- ------------------ --------------
---------
------接着，在 js 文件中引入 x-photoswipe，并初始化。
-- -------------------- ---- -------
------ ---------- ---- --------------
--- ----------- - --------------------------------------
--- ----- - -
-
---- ---------------
-- -----
-- ---
--
-
---- ---------------
-- -----
-- ---
--
-
---- ---------------
-- -----
-- ---
-
--
--------------------------------------------------------------- -------- ------- -
-- --------------------- --- ------ -
--- ----- - -----------------------------------------------------------------------------------------
--- ------- - -
------ ------
---------- ----
-------- ------
----------------- -------- ------- -
--- --------- - -------------------------------------- -----------------------------------------------
----------- - ------------------ -- -----------------------------------
---- - ----------------------------------
------ --- ---------- -- -------- - ------------ -- ------------
-
--
--- ------- - --- ----------------------- --------------------- ------ ---------
---------------
-
---如上所述，我们需要定义 items 数组（图片信息数组），其中每一项包含了这个图片的地址、宽度和高度。接着我们监听 my-gallery 元素的 click 事件，当点击的目标元素是 img 标签时，获取这个图片的索引，并传入到 x-photoswipe 的 options 对象中，然后使用 x-photoswipe 的构造函数生成一个 gallery 就完成了。
参数
x-photoswipe 的 options 对象中有很多参数可以自定义，以下是一些常用的参数：
- index：起始图片的索引值。默认值：0。
- bgOpacity：背景透明度。默认值：1。
- history：注意这个设置可能需要在服务器上运行才能正常工作。打开或关闭每个预览页之间的历史浏览记录。默认值：true。
- closeOnScroll：当滚动时是否关闭预览图。默认值：true。
- maxSpreadZoom：通过两个手指收缩放大图像时的最大比例。默认仅适用于移动设备。默认值：1。
- getThumbBoundsFn：确定预览图在底部缩略图列表中的位置、大小和方向。与 history 参数相同，可能需要在服务器上运行。默认值：null。
示例代码
以下是一个简单的示例代码。该示例使用 x-photoswipe 显示多个图像。如果点击图像，则弹出一个预览（可响应触摸）。
-- -------------------- ---- -------
--------- -----
------
------
------------------- ---------------
----- ---------------- -----------------------------------------------------
----- ---------------- --------------------------------------------------------------------
------ ----------------
---- -
------------ ------ ---------- -----------
---------- -----
------ -----
-------- --
------- --
-
-- -- -
------ -----
------- - ---- ---- --
------ ------
------- ------
----------- -----
--------- ---------
-
-- -- - -
-------- ------
------ -----
------- -----
--------- ---------
-------- ---
-
-- -- --- -
------ -----
------- -----
--------- ---------
---- --
----- --
-
-------------- -
-------- -----
-
--------
-------
------
--- -------------------
----
-- ------------------- ---------------------
---- ------------------ ---------- -- --
----
-----
----
-- ------------------- ---------------------
---- ------------------ ---------- -- --
----
-----
----
-- ------------------- ---------------------
---- ------------------ ---------- -- --
----
-----
-----
---- ------------ ------------- ------------- -------------------
---- -----------------------
---- --------------------------
---- ------------------------
---- -------------------------
---- -------------------------
---- -------------------------
------
---- --------------- ------------------
---- ----------------------
---- ----------------------------
------- ------------------- -------------------- ------------ ----------------
------- ------------------- ----------------- ------------- ---------------------
------- ------------------- ------------------- ----------- -----------------
---- ------------------------
---- -----------------------------
---- -----------------------------
---- -------------------------------------
------
------
------
------
---- ------------------------ ------------------------- ------------------
---- ----------------------------------
------
------- ------------------- -------------------------- --------------- ------ ----------------
------- ------------------- --------------------------- ----------- ------ -----------------
---- ----------------------
---- ------------------------------------
------
------
------
------
------- ----------------------------------------------------------------
------- ---------------------------------------------------------------------------
------- -----------------------
--- --------------------- - -------- ----------------- -
-- ----- ----- ---- ----- ------ ---- ---- ---- --- --------
-- --------- -- ----------------
--- ---------------------- - -------- ---- -
--- ------------- - --------------
-------- - ---------------------
----- - ---
---------
-------
-----
-----
--- ---- - - -- - - --------- ---- -
-------- - ----------------- -- -------- -------
-- ------- ---- ------- -----
-- ------------------ --- -- -
---------
-
------ - --------------------- -- --- -------
---- - --------------------------------------------
-- ------ ----- ------
---- - -
---- ----------------------------
-- ----------------- ----
-- ----------------- ---
--
-- ------------------------- - -- -
-- ------------ -------
---------- - -------------------------------
-
-- ----------------------- - -- -
-- ----- --------- -------- ---------- --------- ---
--------- - ---------------------------------------
-
------- - --------- -- ---- ---- -- ------- --- ----------------
-----------------
-
------ ------
--
-- ---- ------- ------ -------
--- ------- - -------- ----------- --- -
------ -- -- ------- - -- - ---------------------- -----
--
-- -------- ---- ---- ------ -- ---------
--- ----------------- - -------- --- -
- - - -- -------------
---------------- - ------------------ - ------------- - ------
--- ------- - -------- -- -------------
-- ---- ---- ------- -- -----
--- --------------- - ---------------- -------- ---- -
------ ----------- -- ------------------------ --- ------
---
-- ------------------ -
-------
-
-- ---- ----- -- ------- ---- -- ------- ------- --- ----- -----
-- -------------- --- --- ------ ----- --- ----- ---------
--- -------------- - ---------------------------
---------- - --------------------------------------
------------- - ------------------
--------- - --
------
--- ---- - - -- - - -------------- ---- -
-- ----------------------- --- -- -
---------
-
-- -------------- --- ---------------- -
----- - ----------
------
-
------------
-
-- ------ -- -- -
-- ---- ---------- -- ----- ----- -----
--------------------- ----------------
-
------ ------
--
-- ----- ------- ----- --- ------- ----- ---- --- ---------------
--- ------------------- - -------- -- -
--- ---- - ----------------------------------
------ - ---
-- ------------ - -- -
------ -------
-
--- ---- - ----------------
--- ---- - - -- - - ------------ ---- -
-- ---------- -
---------
-
--- ---- - -------------------
-- ------------ - -- -
---------
-
--------------- - --------
-
-- ------------ -
---------- - -------------------- ----
-
------ -------
--
--- -------------- - -------- ------- --------------- ----------------- -------- -
--- ----------- - --------------------------------------
--------
--------
------
----- - ---------------------------------------
-- ------ ------- --- -------
------- - -
------ ------
-- ------ ------- ----- ---- ----
----------- ---------------------------------------------
----------------- -------- ------- -
-- --- ---------- --- ---- --------
--- --------- - ----------------------------------------------- -- ---- ---------
----------- - ------------------ -- -----------------------------------
---- - ----------------------------------
------ --- ---------- -- -------- - ------------ -- ------------
-
--
-- ---- ---
-- --------- -
-- --------------------- -
-- ----- ---- ----- ---- ------ ---- --- ----
-- --------------------------------------------------------------
--- ---- - - -- - - ------------- ---- -
-- ------------- --- ------ -
------------- - --
------
-
-
- ---- -
-- -- --- ------- ----- ---- -
------------- - --------------- --- - --
-
- ---- -
------------- - --------------- ----
-
-- ---- -- ----- --- -----
-- ---------------------- -
-------
-
-- ------------------ -
----------------------------- - --
-
-- ---- ---- -- ---------- --- ---------- --
------- - --- ----------------------- --------------------- ------ ---------
---------------
--
-- ---- ------- --- ------- -------- --- ---- ------
--- --------------- - -------------------------------------------
--- ---- - - -- - - ----------------------- - - -- ---- -
------------------------------------------------ - - ---
-------------------------- - ------------------
-
-- ----- --- --- ---- ------- -- -- -------- -------------
--- -------- - ----------------------
-- ------------- -- ------------- -
---------------------------- ---------------------------- - --- ----- ------
-
--
-- ------- ----- --------
-------------------------------------
---------
-------
-------总结
x-photoswipe 是一款非常实用的图片展示库，通过上述教程，我们可以轻松地在自己的项目中使用它，使得我们的图片展示更加完美。同时，通过深入理解 x-photoswipe 的一些参数，我们也能够更好地定制我们需要的图片展示效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626281e8991b448dfac5