angular 图片查看插件ngx-lightbox

最新推荐文章于 2024-08-23 08:18:04 发布

pg_li

最新推荐文章于 2024-08-23 08:18:04 发布

阅读量3.8k

点赞数

分类专栏： # angular # ng-alain

本文链接：https://blog.csdn.net/ligaoming_123/article/details/82500235

版权

angular 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

ng-alain

35 篇文章 7 订阅

订阅专栏

1、插件下载

angular5 >= 5：npm install --save ngx-lightbox

https://github.com/themyth92/ngx-lightbox

import { Component } from '@angular/core';
import { Lightbox, LightboxConfig, LightboxEvent, LIGHTBOX_EVENT, IEvent, IAlbum } from 'ngx-lightbox';
import { Subscription } from 'rxjs';

@Component({
  selector: 'demo',
  template: `
    <div class="column has-text-centered">
      <div class="img-row" *ngFor="let image of albums; let i=index">
        <img class="img-frame" [src]="image.thumb" (click)="open(i)"/>
      </div>
    </div>
  `,
  host: {
    class: 'columns'
  }
})
export class AppComponent {
  public albums: Array<IAlbum>;
  private _subscription: Subscription;
  constructor(
    private _lightbox: Lightbox,
    private _lightboxEvent: LightboxEvent,
    private _lighboxConfig: LightboxConfig
  ) {
    this.albums = [];
    for (let i = 1; i <= 4; i++) {
      const src = 'demo/img/image' + i + '.jpg';
      const caption = 'Image ' + i + ' caption here';
      const thumb = 'demo/img/image' + i + '-thumb.jpg';
      const album = {
         src: src,
         caption: caption,
         thumb: thumb
      };

      this.albums.push(album);
    }

    // set default config
    this._lighboxConfig.fadeDuration = 1;
  }

  open(index: number): void {
    this._subscription = this._lightboxEvent.lightboxEvent$.subscribe((event: IEvent) => this._onReceivedEvent(event));

    // override the default config
    this._lightbox.open(this.albums, index, { wrapAround: true, showImageNumberLabel: true });
  }

  private _onReceivedEvent(event: IEvent): void {
    if (event.id === LIGHTBOX_EVENT.CLOSE) {
      this._subscription.unsubscribe();
    }
  }
}