Fullscreen Swipeable Image/Video Viewer For Angular

Description:

A responsive, touch-friendly image viewer (gallery lightbox) to present your images and videos in a fullscreen view.

Installation:

# NPM
$ npm install ng-image-fullscreen-view --save

How to use it:

1. Import the module into your project.

import { NgImageFullscreenViewModule } from 'ng-image-fullscreen-view';
@NgModule({
  declarations: [
      AppComponent
  ],
  imports: [
      NgImageFullscreenViewModule,
      ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

2. Add the component to your app template.

<img *ngFor="let img of imageObject; let i = index" [src]="img.thumbImage || img.posterImage" (click)="showLightbox(i)" />
<ng-image-fullscreen-view
        [images]="imageObject"
        [imageIndex]="currentIndex"
        [show]="showFlag"
        (close)="closeEventHandler()">
</ng-image-fullscreen-view>

3. Define the data source in the app.component.ts.

currentIndex: any = -1;
showFlag: any = false;
imageObject: Array<object> = [{
    image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/5.jpg',
    thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/5.jpg',
    title: 'Hummingbirds are amazing creatures'
}, {
    image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/9.jpg',
    thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/9.jpg'
}, {
    video: 'https://youtu.be/tYa6OLQHrEc',
    posterImage: 'https://img.youtube.com/vi/tYa6OLQHrEc/hqdefault.jpg',
    title: 'Youtube example one with title.'
}, {
    image: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/4.jpg',
    thumbImage: 'https://sanjayv.github.io/ng-image-slider/contents/assets/img/slider/4.jpg',
    title: 'Most beautiful birds in the world flying.'
}];
showLightbox(index) {
  this.currentIndex = index;
  this.showFlag = true;
}
closeEventHandler() {
  this.showFlag = false;
  this.currentIndex = -1;
}