FullScreen

<p-galleria
[(value)]="images"
[(visible)]="displayWithThumbnails"
[responsiveOptions]="responsiveWithThumbnails"
[containerStyle]="{ 'max-width': '50%' }"
[numVisible]="9"
[circular]="true"
[fullScreen]="true"
[showItemNavigators]="true"
[baseZIndex]="100000"
>
<ng-template pTemplate="item" let-item>
  <img [src]="item.previewImageSrc" style="width: 100%; display: block" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
  <div class="p-grid p-nogutter p-justify-center">
    <img [src]="item.thumbnailImageSrc" style="display: block" />
  </div>
</ng-template>
</p-galleria>
<button pButton type="button" icon="pi pi-external-link" label="Show" (click)="displayWithThumbnails = true"></button>

<p-galleria
[(value)]="images"
[(visible)]="displayWithoutThumbnails"
[responsiveOptions]="responsiveWithoutThumbnails"
[containerStyle]="{ 'max-width': '850px' }"
[numVisible]="7"
[circular]="true"
[fullScreen]="true"
[showItemNavigators]="true"
[showThumbnails]="false"
[baseZIndex]="100000"
>
<ng-template pTemplate="item" let-item>
  <img [src]="item.previewImageSrc" style="width: 100%; display: block" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
  <div class="p-grid p-nogutter p-justify-center">
    <img [src]="item.thumbnailImageSrc" style="display: block" />
  </div>
</ng-template>
</p-galleria>
<button pButton type="button" icon="pi pi-external-link" label="Show" (click)="displayWithoutThumbnails = true"></button>

<p-galleria
  [(value)]="images"
  [(visible)]="displayCustom"
  [(activeIndex)]="activeIndex"
  [responsiveOptions]="responsiveCustom"
  [containerStyle]="{ 'max-width': '850px' }"
  [numVisible]="7"
  [circular]="true"
  [fullScreen]="true"
  [showItemNavigators]="true"
  [showThumbnails]="false"
  [baseZIndex]="100000"
>
  <ng-template pTemplate="item" let-item>
    <img [src]="item.previewImageSrc" style="width: 100%; display: block" />
  </ng-template>
  <ng-template pTemplate="thumbnail" let-item>
    <div class="p-grid p-nogutter p-justify-center">
      <img [src]="item.thumbnailImageSrc" style="display: block" />
    </div>
  </ng-template>
</p-galleria>
<div *ngIf="images" class="p-grid" style="max-width: 400px">
  <div *ngFor="let image of images; let index = index" class="p-col-3" key="index">
      <img [src]="image.thumbnailImageSrc" [alt]="image.alt" style="cursor: pointer" (click)="imageClick(index)" />
  </div>
</div>