ngx-lightbox-evp 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 ngx-lightbox-evp

ngx-lightbox-evp 是一个基于 Angular 框架的图片查看器，支持多种图片格式和自定义配置。通过 ngx-lightbox-evp，用户可以方便快捷地在网站上浏览图片，提高用户体验。

使用步骤

安装 ngx-lightbox-evp

在项目根目录下，使用 npm 安装 ngx-lightbox-evp：

npm install ngx-lightbox-evp --save

导入 ngx-lightbox-evp

在需要使用 ngx-lightbox-evp 的组件中，导入 LightboxModule 模块：

import { LightboxModule } from 'ngx-lightbox-evp';

@NgModule({
  imports: [ LightboxModule ]
})

准备图片

首先需要准备要展示的图片资源，可以是本地图片也可以是远程图片。

构建 Lightbox

在组件中构建 Lightbox 对象，设置图片资源等属性：

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

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

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

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

显示 Lightbox

最后，在组件中嵌入 Lightbox 模板，并使用 showLightbox 属性控制 Lightbox 的显示：

<div *ngIf="_lightbox.showLightbox">
  <lightbox [images]="photos" [currentImageIndex]="_lightbox.currentImageIndex"></lightbox>
</div>

参数说明

Lightbox

构建 Lightbox 对象时可选的参数：

fadeDuration：Lightbox 淡入淡出的毫秒数，默认为 200
resizeDuration：调整大小时的毫秒数，默认为 200
fitImageInViewPort：当图像加载完成后，调整其大小以适应视口的大小，默认为 true
showImageNumberLabel：在图像上面显示图像编号的标签，默认为 false
wrapAroundImages：是否循环显示图片，默认为 true

Lightbox 组件

images：要显示的图片列表。数组中的每个元素必须包含 src 属性。
currentImageIndex：当前显示的图片索引。可以使用 Lightbox 中的 currentImageIndex 属性实时更新此值。
close：关闭 Lightbox。可以在 Lightbox 的关闭事件或通过组件中的按钮触发。

示例代码

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

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

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

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

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

总结

ngx-lightbox-evp 是一个功能强大的图片查看器，使用它可以让用户在网站上快速高效地浏览图片。在项目中引入 ngx-lightbox-evp 并正确使用它，可以提高用户体验，增加网站的吸引力。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60065f8b238a385564ab6e37