Skip to content

Lightbox Usage

Murhaf Sousli edited this page Feb 15, 2018 · 27 revisions

image

import { Component, OnInit } from '@angular/core';
import { Gallery, GalleryItem } from '@ngx-gallery/core';
import { Lightbox } from '@ngx-gallery/lightbox';

@Component({
  template: `
    <div class="grid">
      <div class="grid-item" 
           *ngFor="let item of items; let i = index" 
           (click)="lightbox.open(i)">
        <img [src]="item.data.thumbnail">
      </div>
    </div>
  `
})
export class AppComponent implements OnInit {

  items: GalleryItem[];

  constructor(public lightbox: Lightbox, public gallery: Gallery) { }

  ngOnInit() {
    this.gallery.ref('lightbox').load(items);
  }
}

See Lightbox Example, Stackblitz