Image zoom example

The zooming feature is NOT available out of the box in ng-gallery! however, you can integrate any image zoom plugins you want.

Here is a stackblitz example how to integrate ngx-imageviewer with the gallery

<gallery id="basic-test" fluid [items]="items" [itemTemplate]="itemTemplate" [gestures]="false"></gallery>

<ng-template #itemTemplate let-index="index" let-type="type" let-data="data" let-currIndex="currIndex">
  <ng-container *ngIf="type === 'imageViewer' && index === currIndex">

    <ngx-imageviewer [src]="data.src"></ngx-imageviewer>

  </ng-container>
</ng-template>

---

You can do the same thing with the lightbox, but first you need to get a reference to the lightbox's galleryRef and then you can set the thumbTemplate or itemTemplate:

@ViewChild('itemTemplate') itemTemplate: TemplateRef<any>;

ngAfterViewInit() {
  this.gallery.ref('lightbox').setConfig({
    itemTemplate: this.itemTemplate
  })
}