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