ngx-image-fullscreen-viewer v3.0.0

NgxImageFullscreenViewer

This library was generated with Angular CLI version 19.0.0.

Description

Angular Fullscreen Viewer

NOW SUPPORTS DISPLAYING ARBRITARY HTML AS SLIDES

Works with images, youtube, videos and arbitrary HTML content.

I am planing on adding additional features per my demand an will publish and document them here.

Install

npm install ngx-image-fullscreen-viewer

Usage

Import in Module or Component file:

import { NgxImageFullscreenViewerComponent } from 'ngx-image-fullscreen-viewer'

and add to imports array.

In template:

<lib-ngx-image-fullscreen-viewer
  [images]="images"
  [paginationShow]="true"
  [show]="{visibleFlag}"
  (close)="visibleFlag = false"
></lib-ngx-image-fullscreen-viewer>

<button (click)="visibleFlag = !visibleFlag">
  Open Fullscreen Viewer
</button>

Where images is an array of objects of following type:

interface ShowMedia {
  image?: string;
  video?: string;
  title?: string;
  alt?: string;
}

As an example with images in component implementation:

// ...
visibleFlag = false
images = [
    {
      html: `
      <div style="background-color:#ffffff">
      <h1>HALLO ANDI !</h1>
      <p>Das ist ein Test</p>
      </div>`,
      type: 'html',
      title: 'HTML 1',
    },
    {
      image:
        'https://fastly.picsum.photos/id/613/536/354.jpg?hmac=f8WsBPQbUfhqaTEyLASnu4NMkTbyljMVVgXlU9CNDyk',
      title: 'Image 1',
      alt: 'Image 1',
    },
    {
      image:
        'https://fastly.picsum.photos/id/567/536/354.jpg?hmac=s5tVi7c1-6xVRcvryVxRWMFZK7uAkqhbcy3_mHVO94E',
      title: 'Image 2',
      alt: 'Image 2',
    },
    {
      image:
        'https://fastly.picsum.photos/id/364/536/354.jpg?hmac=3O0ojRh7NNfYP6PiPhbnupymAgRh1IUj7FK5zAOtrws',
      title: 'Image 3',
      alt: 'Image 3',
    },
  ];
// ...

The viewer is needed to be presented with an object for the property show as shown in the example:

{
  visibleFlag: boolean
  index?: number 
}

Where index is optional: If set the specified image is shown if ommited the viewer is reset to image index 0.

Further help

For questions send an email and feel free to make pull requests.

License

As Angular itself, this module is released under the permissive MIT license