npm 包 ngx-gallery-gocodee 使用教程

ngx-gallery-gocodee 是一个基于 Angular 框架的图像和视频库，可以在网站和应用程序中使用。它是一个强大的库，可以使图像和视频在网站上变得容易展示和呈现。这个库被广泛地使用，因为它易于使用，同时也具有非常高的灵活性和可扩展性。

在本文中，我们将学习如何使用 ngx-gallery-gocodee 库。我们会从安装开始，并详细介绍它的每个功能。我们还会通过几个例子来说明如何使用 ngx-gallery-gocodee 库。

安装 ngx-gallery-gocodee

ngx-gallery-gocodee 可以通过 npm 包管理工具进行安装。只需要在终端中执行以下命令即可：

--- ------- ------ -------------------

创建一个 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 库的注意事项

  1. 要使用 ngx-gallery-gocodee 库，你必须先安装 Angular 和 rxjs 依赖。
  2. ngx-gallery-gocodee 库是由多个模块组成的。如果你使用的是 Angular CLI，请确保正确地导入 ngx-gallery-gocodee 模块。
  3. ngx-gallery-gocodee 库支持图像、视频和 iframe 的展示，具有非常高的灵活性和可扩展性。
  4. 如果您想了解更多关于 ngx-gallery-gocodee 库的使用，请查看官方文档。

总结

在本文中，我们深入学习了 ngx-gallery-gocodee 库的使用，并通过几个例子来说明如何配置和使用 ngx-gallery-gocodee 库。我们还介绍了如何添加图像、视频和 iframe 等元素。希望本文能对您有所帮助。

参考链接

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5551ab1864dac66a75

阅读全文

猜你喜欢

  • 使用 @jithusyam/angular2-datatable 构建强大的数据表格

    作为一个前端开发者，我们经常需要展示各种数据信息，并希望以清晰、简明和美观的方式展示。此时，数据表格是不可或缺的一种组件。而对于我们而言，最佳实践是通过使用一款高质量的 npm 包， 如 @jithu...

    3 年前
  • npm 包 @m31271n/generator-es-module 使用教程

    在现代的前端开发中，ES6 模块已经成为了大势所趋。而使用 ES6 模块的一个重要环节就是对 ES6 模块进行打包、转译等操作。这时候，ES6 模块的生成器就显得非常重要了。

    3 年前
  • npm 包 beta.php 使用教程

    简介 beta.php 是一个用于处理 PHP 文件的 npm 包，它可以在前端使用，将 PHP 文件转为可用的 JavaScript。该包主要使用 NodeJS 语言编写，可以帮助开发者更好地解决在...

    3 年前
  • npm 包 bind.php 使用教程

    本文将详细介绍如何使用 npm 包 bind.php，以及它如何为前端开发者提供便利。bind.php 是一个可以将服务器上的 PHP 脚本绑定到本地开发环境的工具。

    3 年前
  • npm 包 bin.php 使用教程

    在前端开发中，npm 是一个非常重要的工具，它可以帮助我们管理依赖包并提供了很多强大的包来加速开发。其中一个很有用的 npm 包就是 bin.php，它是一个将 PHP 脚本转换为命令行工具的工具包，...

    3 年前
  • npm 包 binder.php 使用教程

    随着 Web 开发的不断发展，前端开发所涉及的范围越来越广。而在开发过程中，前端与后端的协作成为了必不可少的一部分。而在实现前后端的协作中，经常会涉及到 php 语言的使用。

    3 年前
  • npm 包 bing.php 使用教程

    前言 在前端开发中，我们经常需要对查询参数进行解析和构造操作。基于此，npm 上有一个众所周知的工具包 query-string 实现了这个功能。但是，如果我们需要对多种语言进行解析和构造，该怎么办呢...

    3 年前
  • npm包gitbook-plugin-autohome-fix-link使用教程

    什么是npm包? npm全称Node Package Manager，是一个Javascript包管理工具，它是Node.js的默认包管理工具。在前端生态中，npm包是非常重要的，开发者可以通过npm...

    3 年前
  • npm 包 logi-filter-builder 使用教程

    前言 在前端开发过程中，有时候需要对数据进行过滤，而 logi-filter-builder 是一个开源的 npm 包，它可以帮助我们构建一个复杂的过滤器，以便编写高度可配置的数据过滤器。

    3 年前
  • npm 包 justows.conn.smtp 使用教程

    什么是 justows.conn.smtp justows.conn.smtp 是一个 Node.js 的 npm 包，用于发送邮件的 SMTP 客户端。 这个 npm 包提供了简洁灵活的 API，可...

    3 年前
  • npm 包 think-model-decorator 使用教程

    前言 think-model-decorator 是一个用于 ThinkJS 框架的 npm 模型注解器。它让开发者可以更加方便地进行模型定义，减少了模型定义中大量的模板代码。

    3 年前
  • npm 包 cardinal-pdfjs-dist 使用教程

    随着数字化时代的到来，越来越多的文本资料转化为电子版。然而，电子版的阅读往往带来许多不便之处，比如需要使用特定的软件或者在线服务。为解决这些问题，我们可以将 PDF 文档转化为图片格式，使用图片之所以...

    3 年前
  • npm 包 biodata.php 使用教程

    简介 biodata.php 是一个能够快速生成人员信息的 npm 包。该包集成了常见的人员信息生成方式，例如随机生成姓名、性别、生日、家庭住址等等。使用该包可以帮助前端开发人员快速生成测试数据，提高...

    3 年前
  • npm 包 react-native-radial-context-menu 使用教程

    简介 react-native-radial-context-menu 是一个基于 React Native 的 radian 菜单组件，通过圆形菜单进行快速导航和操作。

    3 年前
  • npm 包 sonnet-cli 使用教程

    介绍 Sonnet-cli 是一款基于 Node.js 平台的命令行工具，它可以为前端项目提供许多便捷的功能和支持。 Sonnet-cli 常用功能包括：创建新的项目、运行本地服务器、打包等一系列操作...

    3 年前
  • 前端类技术文章：npm 包 brain-games-s380 使用教程

    前端类技术文章：npm 包 brain-games-s380 使用教程 Brain-games-s380 是一个用于开发智力游戏的 npm 包，它提供了多种有趣的游戏，可以让用户在玩耍的同时锻炼大脑，...

    3 年前
  • npm 包 rasterize-svg 使用教程

    在前端开发中，我们经常需要将 SVG 图像渲染到页面上或者导出为图片文件。在这个过程中，一个非常好用的工具就是 rasterize-svg npm 包。在这篇文章中，我们将详细介绍如何使用这个工具和一...

    3 年前
  • npm 包 cli_snake_game 使用教程

    简介 CLI Snake Game 是一个用 Node.js 编写的命令行贪吃蛇游戏，它支持自定义地图大小、障碍物位置和蛇的起始位置。CLI Snake Game 可以通过 NPM 安装并使用，是一款...

    3 年前
  • npm 包 insensitive 使用教程

    在开发 Web 应用程序时，我们通常需要与用户输入进行交互。然而，由于用户输入的大小写和格式不确定性，我们需要对输入进行规范化处理，才能进行有效的比较或搜索操作。而 npm 包 insensitive...

    3 年前
  • npm 包 npmszdtest091 使用教程

    什么是 npm 包？ npm 包是指基于 Node.js 平台的包管理器 npm 所提供的一套包系统。它允许开发者将自己编写的代码打包成可重用的模块，供其他开发者使用。

    3 年前

相关推荐

    暂无文章