简介
nanogallery 是一个开源的基于 jQuery 的图库插件，支持响应式布局、控制面板、滚动视图等功能。借助 npm，您可以轻松地将 nanogallery 集成到您的项目中。
安装
您需要在项目中使用 npm 来安装 nanogallery，打开终端并键入以下命令：
npm install nanogallery
引入
在您的 HTML 文件中引入 nanogallery 的 CSS 和 JavaScript 文件。您可以通过以下方式引入它们：
<link rel="stylesheet" href="node_modules/nanogallery/dist/css/nanogallery.min.css"> <script src="node_modules/nanogallery/dist/jquery.nanogallery.min.js"></script>
使用
基本用法
创建一个包含图像的 HTML 元素，并为其指定 nanogallery 类：
<div class="nanogallery"> <a href="path/to/image1.jpg" data-ngthumb="path/to/thumb1.jpg"></a> <a href="path/to/image2.jpg" data-ngthumb="path/to/thumb2.jpg"></a> <a href="path/to/image3.jpg" data-ngthumb="path/to/thumb3.jpg"></a> </div>
初始化插件：
jQuery(document).ready(function () {
jQuery(".nanogallery").nanogallery();
});自定义选项
您可以通过传递选项对象来自定义插件的行为：
-- -------------------- ---- -------
------------------------------- -- -
------------------------------------
--------------- -------
---------------- ----
------------------------ --
-------------------------- --
--------------------- --
---------------------- --
------------- -----------------
---
---事件监听
您可以通过监听插件中的事件来响应用户的交互行为：
jQuery(document).on("nanoGalleryAfterOpenImage.nanoGallery", function (e, args) {
console.log(args.src);
});示例代码
以下示例展示了如何使用 nanogallery 打造一个简单的图库页面，其中包含导航菜单、滚动视图和控制面板。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------------
----- ---------------- -------------------------------------------------------------
-------
----- -
----------------- -----
------ ------
-------- -----
---------------- -------
------------ -------
------- -----
---------- -----
-
-------- -
----------- -----
-
--------
-------
------
---- ------------ -------------
---- ------------ --------------------
-- ------------------------- --------------------------------------
-- ------------------------- --------------------------------------
-- ------------------------- --------------------------------------
------
------- ------------------------------------------------------
------- -----------------------------------------------------------------------
--------
------------------------------- -- -
--------------------------------
--------------- -------
---------------- ----
------------------------ --
-------------------------- --
--------------------- --
---------------------- --
------------- ------------------
--------------------------- -----
------------------------ ------
----------------------- -----
------------------------ -----
---------------- -------- ----------- -
--------------------
----------- ---
---------- --------
---
-
---
-- ------ -- --- -- ------- ---- -- ----- -- ------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------