ngx-gallery-gocodee 是一个基于 Angular 框架的图像和视频库，可以在网站和应用程序中使用。它是一个强大的库，可以使图像和视频在网站上变得容易展示和呈现。这个库被广泛地使用，因为它易于使用，同时也具有非常高的灵活性和可扩展性。
在本文中，我们将学习如何使用 ngx-gallery-gocodee 库。我们会从安装开始，并详细介绍它的每个功能。我们还会通过几个例子来说明如何使用 ngx-gallery-gocodee 库。
安装 ngx-gallery-gocodee
ngx-gallery-gocodee 可以通过 npm 包管理工具进行安装。只需要在终端中执行以下命令即可：
npm install --save ngx-gallery-gocodee
创建一个 ngx-gallery-gocodee
首先,我们需要导入 ngx-gallery-gocodee 库。接下来，我们可以创建一个 ngx-gallery-gocodee 实例，最后将其添加到模板中。
-- -------------------- ---- -------
------ - ------------------ ---------------- ------------------- - ---- ----------------------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- ------------- -------------------------- ----------------------------------------
--
------ ----- ------------ -
--------------- --------------------
-------------- ------------------
----------- ---- -
------------------- - -
-
------ -------
------- --------
------------------ --
--------------- -------------------------
--
-- ---
--
------------------ - -
-
------ -------------------------
------- --------------------------
---- ----------------------
--
-- ---
--
-
-在这个例子中，我们使用了 ngx-gallery-gocodee 库的 NgxGalleryOptions 和 NgxGalleryImage 类。通常，NgxGalleryOptions 包含了库的参数，NgxGalleryImage 包含了图片和视频的信息。
参数说明
懂得如何创建 ngx-gallery-gocodee 实例后，我们来学习一下每个参数的详细信息。
NgxGalleryOptions
- image: 布尔值，指示是否显示图像。默认为 true。
- imageAnimation: 图片动画。可选值为 None、Slide、Rotate、Fade。
- imageSize: 图像大小，可选值为 Contain（默认值）、Cover、Auto、100%、200% 等。
- thumbnails: 布尔型，指示是否显示缩略图。默认为 true。
- thumbnailSize: 缩略图大小。
- thumbnailsColumns: 缩略图列数。默认为 4。
- thumbnailMargin: 缩略图之间的边距。默认为 5。
- thumbnailsRemainingCount: 显示的剩余缩略图数量。默认为 true，显示数字。
- thumbnailsDirection: 缩略图显示方向。可选值为 horizontal、vertical。
- thumbnailActions: 缩略图操作，如下载、分享。
- preview: 是否显示预览图。默认为 true。
- previewZoom: 预览图缩放大小。默认为 0.5。
- previewFullscreen: 全屏显示预览图。默认为 true。
- previewCloseOnClick: 点击预览图关闭。默认为 false。
- previewKeyboardNavigation: 键盘导航预览图。默认为 false。
- previewCloseOnEsc: 单击 ESC 关闭预览图，默认为 true。
- arrows: 布尔值，指示是否显示箭头。默认为 true。
- arrowPrevIcon: 上一个箭头图标。默认为 fa-chevron-left。
- arrowNextIcon: 下一个箭头图标。默认为 fa-chevron-right。
- arrowPrevShow: 布尔型，指示是否显示上一个箭头。默认为 true。
- arrowNextShow: 布尔型，指示是否显示下一个箭头。默认为 true。
- closeIcon: 关闭图标。默认为 fa-times。
- closeOnClick: 点击关闭。默认为 false。
- fullscreen: 全屏显示。默认为 true。
- fullscreenIcon: 全屏图标。默认为 fa-expand。
- spinnerIcon: 加载符号。默认为 fa-spinner fa-pulse。
- autoplay: 自动播放。默认为 false。
- autoplayInterval: 播放间隔。默认为 2000 毫秒。
- backgroundStyle: 背景样式。可选值为 light、dark，或任何 CSS 类或数组。
NgxGalleryImage
- small: 小的图像 URL。
- medium: 中等图像的 URL。
- big: 大的图像 URL。
- description: 图像的描述。
- url: 图像链接。
- type: 图像的类型，可选值为 image、video、iframe。
- label: 图像的标签，如选择的集合、比特率等。
图片和视频
ngx-gallery-gocodee 库不仅支持图像，还支持视频和 iframe。要在 ngx-gallery-gocodee 中添加视频，只需设置 type 属性为 video，然后在 medium、big 属性中添加视频链接。
-- -------------------- ---- -------
------ - ------------------ ---------------- ------------------- - ---- ----------------------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- ------------- -------------------------- ----------------------------------------
--
------ ----- ------------ -
--------------- --------------------
-------------- ------------------
----------- ---- -
------------------- - -
-----
--
------------------ - -
-
------ -------------------------
------- --------------------------
---- -----------------------
----- ------------
---- -------------------
------------ ----------
--
-- ---
--
-
-要在 ngx-gallery-gocodee 中添加 iframe，只需将 type 属性设置为 iframe：
-- -------------------- ---- -------
------ - ------------------ ---------------- ------------------- - ---- ----------------------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- ------------- -------------------------- ----------------------------------------
--
------ ----- ------------ -
--------------- --------------------
-------------- ------------------
----------- ---- -
------------------- - -
-----
--
------------------ - -
-
------ -------------------------
------- --------------------------
---- -----------------------
----- ---------
---- --------------------------------------------
------------ ----------
--
-- ---
--
-
-下面是一个包含了图片、视频和 iframe 的 ngx-gallery-gocodee 的示例。
-- -------------------- ---- -------
------ - ------------------ ---------------- ------------------- - ---- ----------------------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- ------------- -------------------------- ----------------------------------------
--
------ ----- ------------ -
--------------- --------------------
-------------- ------------------
----------- ---- -
------------------- - -
-
------ -------
------- --------
------------------ --
--------------- --------------------------
------------- ---
------------------ --
--
-
----------- ----
------ -------
------- --------
------------------ --
------------- ----
------------------ ---
----------------- ---
--
-
----------- ----
-------- -----
-
--
------------------ - -
-
------ -------------------------
------- --------------------------
---- -----------------------
------------ ----------
--
-
------ -------------------------
------- --------------------------
---- -----------------------
------------ ----------
--
-
------ -------------------------
------- --------------------------
---- -----------------------
----- ------------
---- -------------------
------------ ----------
--
-
------ -------------------------
------- --------------------------
---- -----------------------
----- ---------
---- --------------------------------------------
------------ ----------
-
--
-
-使用 ngx-gallery-gocodee 库的注意事项
- 要使用 ngx-gallery-gocodee 库，你必须先安装 Angular 和 rxjs 依赖。
- ngx-gallery-gocodee 库是由多个模块组成的。如果你使用的是 Angular CLI，请确保正确地导入 ngx-gallery-gocodee 模块。
- ngx-gallery-gocodee 库支持图像、视频和 iframe 的展示，具有非常高的灵活性和可扩展性。
- 如果您想了解更多关于 ngx-gallery-gocodee 库的使用，请查看官方文档。
总结
在本文中，我们深入学习了 ngx-gallery-gocodee 库的使用，并通过几个例子来说明如何配置和使用 ngx-gallery-gocodee 库。我们还介绍了如何添加图像、视频和 iframe 等元素。希望本文能对您有所帮助。
参考链接
- ngx-gallery-gocodee 官方网站：https://www.npmjs.com/package/ngx-gallery-gocodee。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5551ab1864dac66a75