介绍
@iiif/iiif-gallery-component 是一个基于 IIIF（International Image Interoperability Framework）协议的图像库，具备像素级别的在线浏览以及获取研究级别图像的能力。该 npm 包提供了用于构建 IIIF 资源的组件库，其中包括展示画廊（gallery）的组件，本文将介绍该组件的使用方法。
安装和引入
在使用之前，需要将该包安装到项目中。在终端运行以下命令：
npm install @iiif/iiif-gallery-component --save
在 JavaScript 文件中引入包：
import { IiifGalleryComponent } from "@iiif/iiif-gallery-component";使用方法
初始化
初始化画廊组件需要传入一个包含展示图片所需信息的对象。下面是一个示例，其中 images 是待展示的图片数组，每个图片对象至少需要包含 URL 和 label 字段。
-- -------------------- ---- -------
----- --------- - -
-
------ -------- ---
------- -
-
----- ----------------
------ ------ ----
--
-
----- ----------------
------ ------ ----
--
--
--
-
------ -------- ---
------- -
-
----- ----------------
------ ------ ----
--
-
----- ----------------
------ ------ ----
--
--
--
--
----- ---------------- - --- ----------------------
----------
---------- ---------------------------------------------
---API
该组件提供以下 API：
-- -------------------- ---- -------
-- -----------
-----------------------------------
-- -------------
-----------------------------
-- ----------
--------------------------------
-- --------
-----------------------------
-- --------
---------------------------------
-- ----------
------------------------------
-- ------- --------
--------------------------------------- -
-
----- ----------------
------ ------ ----
--
-
----- ----------------
------ ------ ----
--
---
-- -------- --------
-------------------------------------------事件
该组件还提供了以下事件：
-- -------------------- ---- ------- -- --------- ---------------------------------- ------- -- - ------------------------- --- -- --------- ------------------------------------ --------- -- - --------------------------- --- -- -------- --------------------------------- --------- -- - --------------------------- --- -- -------- ------------------------------------ ----------- -- - ----------------------- ---
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------------------------- ---------------
-------
------------------ -
------ ------
------- ------
-
--------
-------
------
---- -----------------------------
------- --------------
------ - -------------------- - ---- -------------------------------
----- --------- - -
-
------ -------- ---
------- -
-
----- ----------------
------ ------ ----
--
-
----- ----------------
------ ------ ----
--
--
--
-
------ -------- ---
------- -
-
----- ----------------
------ ------ ----
--
-
----- ----------------
------ ------ ----
--
--
--
--
----- ---------------- - --- ----------------------
----------
---------- ---------------------------------------------
---
---------------------------------- ------- -- -
-------------------- ------ -- -------------
---
---------
-------
-------总结
@iiif/iiif-gallery-component 是一个方便构建 IIIF 资源画廊的 npm 组件库，使用简单且提供了丰富的 API 和事件，能够满足一般的画廊需求。在使用该组件时，需要提供展示的图片信息以及画廊容器，同时可以根据需要自定义事件和 API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/88761