Lightbox Usage

To open a gallery in a lightbox, first, we need to create a new gallery reference using the Gallery service, then load the items into it and then we open it in the lightbox

1. Create gallery items

2. Get a GalleryRef instance from the Gallery service

3. Load the items into the created instance

4. Use the lightbox service to open the gallery

Example:

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

Lightbox screenshot:

Moreover, There is a directive [gallerize] that you can use to add the images from your template automatically to the lightbox, however, it will use the same image for the thumbnail. check auto-detect example