Angular Image Viewer Component : NgxImageViewer


A configurable Angular image viewer component, compatible with Angular image viewer 2.x, 4.x and 5.x.

Features:

  • Compatible with Angular 2.x, 4.x and 5.x
  • Configurable
  • Rotate image
  • Zoom image
  • Configurable
  • Resizeble component
  • Supports JPEG, PNG, GIF and PDF
  • Support File Objects
  • Avaliable actions:
    • Rotate
    • Zoom
    • Reset to maximize size
    • Free movable
    • Change page (available just for PDF files)

Configuration can be provided at the module level (by passing the object as an argument to for Root(), or at the component level, by passing it as the config input.

{
  btnClass: default, // The CSS class(es) that will apply to the buttons
  zoomFactor: 0.1, // The amount that the scale will be increased by
  containerBackgroundColor: #ccc, // The color to use for the background. This can provided in hex, or rgb(a).
  wheelZoom: true, // If true, the mouse wheel can be used to zoom in
  allowFullscreen: true, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
  allowKeyboardNavigation: true, // If true, the left / right arrow keys can be used for navigation
  btnIcons: { // The icon classes that will apply to the buttons. By default, font-awesome is used.
    zoomIn: fa fa-plus,
    zoomOut: fa fa-minus,
    rotateClockwise: fa fa-repeat,
    rotateCounterClockwise: fa fa-undo,
    next: fa fa-arrow-right,
    prev: fa fa-arrow-left,
    fullscreen: fa fa-arrows-alt,
  },
  btnShow: {
    zoomIn: true,
    zoomOut: true,
    rotateClockwise: true,
    rotateCounterClockwise: true,
    next: true,
    prev: true
  }

To use default configuration, simply import the ImageViewerModule into your module, like so:

import { ImageViewerModule } from "ngx-image-viewer";

@NgModule({
  //...
  imports: [
    //...
    ImageViewerModule.forRoot()
  ],
  //...
})
For More jquery Plugins Click


 

Leave a Reply

Your email address will not be published. Required fields are marked *