NgxImageViewer is a configurable angular image viewer component, compatible with Angular 2.x, 4.x, and 5.x.
ngx image viewer demo, ngx image viewer stackblitz, angular image viewer demo, ng2 image viewer, ng2 image viewer demo, clarivateangular image viewer
Features:
- Compatible with Angular 2.x, 4.x and 5.x
- Configurable
- Rotate image
- Zoom image
- Drag to move image
- Toggle fullscreen mode
How to make use of it:
1. To use the default configuration, simply import the ImageViewerModule into your module, like so:
import { ImageViewerModule } from "ngx-image-viewer"; @NgModule({ //... imports: [ //... ImageViewerModule.forRoot() ], //... })
2. Next, add the component to your template, providing a set of image URLs.
<ngx-image-viewer [src]="images" [(index)]="imageIndex"></ngx-image-viewer>
3. To add additional buttons use the following.
<ngx-image-viewer [src]="images" [config]="{customBtns:[{name: 'link', icon: 'fa fa-paperclip'}]}" (customEvent)="handleEvent($event)"> </ngx-image-viewer>
handleEvent(event: CustomEvent) { console.log(`${event.name} has been click on img ${event.imageIndex + 1}`); switch (event.name) { case 'print': console.log('run print logic'); break; } }
configurable angular image viewer component, NgxImageViewer Plugin/Github
See Demo And Download
Official Website(jpilfold): Click Here
This superior jQuery/javascript plugin is developed by jpilfold. For extra advanced usage, please go to the official website.