什么是 galleria？
Galleria 是一个基于 jQuery 的图片展示库，可以用于创建美观的幻灯片、相册和图库等图片展示页面。它支持响应式设计，并且具有许多自定义选项和插件。
安装 galleria
使用 npm 可以方便地安装和管理 galleria 包。在命令行中输入以下命令即可安装：
--- ------- --------
使用 galleria
第一步：引入 galleria 样式和脚本文件
将样式表和 JavaScript 文件添加到 HTML 页面中的 head 标签中：
--------- -----
------
------
----- ----------------
--------------- ------------
----- ---------------- ----------------------------
------- -------------------------------------
------- ---------------------------------------
-------
------
---- ------ ---
-------
-------第二步：创建图片列表
在 body 标签中，添加一个包含所有图片路径的 ul 列表：
--- --------------
-------- ------------------------------
-------- ------------------------------
-------- ------------------------------
---- ---- ---
-----第三步：使用 galleria 初始化图片展示
在页面加载完成后，使用以下 JavaScript 代码初始化 galleria：
--------
------------------------------------------------
------------------------- -
--------- -----
-------- -----
------- ---
---
---------其中，loadTheme() 方法用于加载 galleria 主题文件，run() 方法用于初始化图片展示。这里启用了自动播放、显示导航和设置高度为 500 像素。
自定义选项
除了上面的选项外，galleria 还支持许多其他选项和插件。例如，您可以通过添加以下代码来启用缩略图导航：
--------
------------------------- -
-------------------- ----
---
---------示例代码
下面是一个完整的示例代码，演示如何使用 galleria 创建一个带有缩略图导航的图片展示页面：
--------- -----
------
------
----- ----------------
--------------- ------------
----- ---------------- -----------------------------------------------------------------------------------------------------
------- -----------------------------------------------------------
------- -------------------------------------------------------------------------------------
-------
------
--- --------------
-------- ------------------------------------------------
-------- ------------------------------------------------
-------- ------------------------------------------------
-------- ------------------------------------------------
-------- ------------------------------------------------
-------- ------------------------------------------------
-------- ------------------------------------------------
-----
--------
------------------------- -
--------- -----
-------- -----
-------------------- ----
---
---------
-------
-------结论
通过本文的介绍，您已经学会了如何使用 npm 包 galleria 创建一个图片展示页面
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/34668