前言
在前端开发中，我们经常需要使用图片展示的功能，对于一些需要图片加强显示效果的场景，例如图片展示、相册浏览等等，我们可以借助 lightgallery.esm.js 这个 npm 包。本文将详细介绍该 npm 包的使用方法，包括如何引入、配置等。
安装
lightgallery.esm.js 这个 npm 包可以使用以下命令进行安装：
npm install lightgallery.esm.js --save
引入
安装完成后，在项目中引入该包：
<link rel="stylesheet" href="/path/to/node_modules/lightgallery.esm.js/css/lightgallery.css"> <script type="module" src="/path/to/node_modules/lightgallery.esm.js/lightgallery.esm.js"></script>
注意：必须使用 type="module" 的方式引入 lightgallery.esm.js
配置
在引入 lightgallery.esm.js 后，需要对其进行配置，下面是一个简单的配置示例：
-- -------------------- ---- -------
---- -------------
-- -----------------
---- --------------------
----
-- ------------------
---- ---------------------
----
------
--------
----- ------- - -----------------------------------
--------------------- -
----- -----------
------ ----
---------- -
---
---------上述代码主要包含了两部分：
- html 代码：在一个 div 中包含多个 a 标签，每个 a 标签都对应着图片的原图和缩略图。
- js 代码：对 div 进行初始化，设置播放模式、速度和 galleryId。
其中，最重要的是第 2 部分的配置。
播放模式
lightgallery.esm.js 支持多种播放模式，包括淡入淡出、滑动切换、旋转切换、翻转切换等多种模式，下面是该 npm 包支持的几种模式：
- 'lg-fade'
- 'lg-slide'
- 'lg-zoom-in'
- 'lg-zoom-out'
- 'lg-rotate'
- 'lg-flip'
例如：
lightGallery(gallery, {
mode: 'lg-slide'
});速度
设置播放速度，单位为毫秒，例如：
lightGallery(gallery, {
speed: 500
});galleryId
当一个页面中有多个图片展示时需要使用 galleryId 对展示做出识别，例如：
lightGallery(gallery, {
galleryId: 1
});高级配置
除了上述基本的配置之外，lightgallery.esm.js 还支持更为高级的配置，包括各种控制器以及事件监听，这里只介绍其中比较常见的几种。
图片描述
通过添加 title 属性，lightgallery.esm.js 可以自动获取图片描述并且显示在图片下方，例如：
<a href="image.jpg" title="这是图片描述">
<img src="thumbnail.jpg">
</a>控制器
lightgallery.esm.js 提供了多种控制器，可以方便地控制展示的图片以及导航的方式，比如下面的例子中包含导航条、缩略图预览等多种控制器：
lightGallery(gallery, {
controls: true,
showThumbByDefault: true,
});自定义图标
lightgallery.esm.js 中的图标可以通过修改源代码进行自定义，也可以使用常见的图标库如 font-awesome 和 material icons 等，在进行配置时需指定相关的 class 名称，例如：
-- -------------------- ---- -------
--------------------- -
--------- -----
--------- ------
------------ ------
----- -----
----- ------
------ ------
----------- -----
---------- -----
------------- -----
--------- ------
------ -----
------------ -----
------------------ -----
----------- -----
------------ -----
--------- --- ------------------------------------------
--------- --- --------------------------------------------
------------------- -----
-------------- -----
----------- ------
---事件监听
lightgallery.esm.js 中提供了多种事件监听，可以在对应的操作完成后执行自己的逻辑操作，例如下面的例子中，当点击图片的时候将图片 url 输出到控制台：
-- -------------------- ---- -------
--------------------- -
--------- ------
----------- -----
----- --------------------
----------- ------
--------- ------
-------- ------
-------- -----
---
--------------------------------------- ---------- -
---------------------
---
----------------------------------------- ---------- -
---------------------
---
------------------------------------------- -------------- -
--------------- ------ ----------
---结语
至此，我们已经讲述了 lightgallery.esm.js 的安装、引入、配置以及高级功能，希望本文对你有所帮助。lightgallery.esm.js 在前端开发中扮演着重要的角色，可以更好地实现图片的展示功能，非常适合在图片展示、相册浏览等方面使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555b481e8991b448d2cdb