Lightbox Usage

The usage of the lightbox is pretty straight forward

1. Get a gallery ref and load some items in it
2. Display the items in the template
3. Use the lightbox service lightbox.open(index) to open it on image click

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

@Component({
  template: `
    <div class="image-thumbnail" 
         *ngFor="let item of items; index as i"
         [lightbox]="i">

      <img [src]="item.data.thumb">

    </div>
  `
})
export class AppComponent implements OnInit {

  items: GalleryItem[];

  constructor(public gallery: Gallery) { }

  ngOnInit() {
    // Load items into gallery
    this.gallery.ref().load(this.items);
  }
}

See Lightbox Example, Lightbox Stackblitz

For fullscreen mode

By default fullscreen is obtained on small size screen (mobile) but you can set it as default for all screen sizes

Example:

GalleryModule,
LightboxModule.withConfig({
  panelClass: 'fullscreen'
})

Or straight within the open function

openLightbox() {
  this.lightbox.open(0, 'lightbox', {
    panelClass: 'fullscreen'
  });
}

Moreover, There is a directive [gallerize] that loads you can use to add the images from your template automatically to the lightbox, check Galleries example