介绍
@jitenderbadoni/ngx-image-video-gallary 是一个基于 Angular 的图片视频展示组件库，支持图片和视频混合展示，支持图片和视频的缩放和点击查看等功能。
在本文中，我们将详细介绍如何使用 @jitenderbadoni/ngx-image-video-gallary 实现图片和视频的展示。
安装
使用 npm 安装 @jitenderbadoni/ngx-image-video-gallary：
npm i @jitenderbadoni/ngx-image-video-gallary
使用
首先在需要使用该组件的模块中引入：
-- -------------------- ---- -------
------ - -------------------------- - ---- ------------------------------------------
-- ---
-----------
-------- -
-- ---
--------------------------
-- ---
--
-- ---
--
------ ----- --------- - -然后在组件中使用：
<ngx-image-video-gallery [galleryItems]="galleryItems" (itemClick)="onGalleryItemClick($event)" ></ngx-image-video-gallery>
其中 galleryItems 是一个数组，定义了图片和视频的信息，如下所示：
-- -------------------- ---- -------
------------ - -
-
--------- ---------------------------
------------- ------------------------------------
--
-
--------- ---------------------------
------------- ------------------------------------
--
-
--------- ---------------------------
------------- ------------------------------------
--
--上面的例子中，galleryItems 数组包含了两张图片和一段视频的信息。每个元素包含了图片或视频的地址以及缩略图的地址。在组件中，可以通过点击图片或视频来触发 itemClick 事件，onGalleryItemClick 方法将接收事件参数，包含展示的图片或视频信息。
以下是一个完整的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ------------------------------------------
------------
--------- -----------
--------- -
------------------------
-----------------------------
----------------------------------------
---------------------------
--
--
------ ----- ------------ -
------------- ---------------- - -
-
--------- ---------------------------
------------- ------------------------------------
--
-
--------- ---------------------------
------------- ------------------------------------
--
-
--------- ---------------------------
------------- ------------------------------------
-
--
------------------------- --------------- -
-------------------
-
-参数
@jitenderbadoni/ngx-image-video-gallary 组件提供了以下参数：
galleryItems：NgxGalleryItem[]，必须参数，定义了图片和视频的信息；thumbnailColumns：number，可选参数，定义了缩略图的列数，默认为 3；thumbnailSize：{ width: number, height: number }，可选参数，定义了缩略图的大小，默认为{ width: 150, height: 150 }；thumbnailMargin：number，可选参数，定义了缩略图之间的间距，默认为 5。
结语
@jitenderbadoni/ngx-image-video-gallary 是一个方便快捷的图片视频展示组件库，使用起来非常简单。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822beb