Lightbox Usage

1. Make sure @ngx-gallery/core is installed

2. Install it with npm or yarn

npm install --save @ngx-gallery/lightbox @angular/cdk

or

yarn add @ngx-gallery/lightbox @angular/cdk

3. Import the module

import { BrowserAnimationsModule } from  '@angular/platform-browser/animations';
import { GalleryModule } from '@ngx-gallery/core';
import { LightboxModule} from '@ngx-gallery/lightbox';

@NgModule({
 imports: [
    // ...
    BrowserAnimationsModule,
    GalleryModule.forRoot(galleryConfig?),
    LightboxModule.forRoot(lightboxConfig?)
 ]
})

4. Load images into the gallery

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.