npm

ngx-img-zoom-viewer
TypeScript icon, indicating that this package has built-in type declarations

0.13.2 • Public • Published

NGX IMG Zoom Viewer Project License Badge

Description

This project lets the user see a zoomed preview of a portion of an image (as we can see the zoomed image preview in the product detail pages of Amazon and Flipkart websites)

Table of Contents


Installation


Step 1 : -

To add ngx-img-zoom-viewer open a terminal in your root directory and run the following command

  npm i ngx-img-zoom-viewer

this will add the depandancy in your package.json file,

Step 2 : -

Add NGXimgZoomViewer in your app.module.ts file

  import { NGXImgZoomViewerModule } from 'ngx-img-zoom-viewer'

  @NgModule ({
    ...,
    imports: [
      ...,
      NGXImgZoomViewerModule
    ],
    ...
  })
  ...

Use


Now we are Free to use NGXimgZoomViewer we can start using it by just adding

In template

  <ngx-img-zoom-viewer [src]="url" > </ngx-img-zoom-viewer>

In TypeScript class

  url = "https://images.unsplash.com/photo-1665513284188-661b9cb5c993?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=765&q=80"

Config


there we have added some costomization that can help user to control the behavior of ngx-img-zoom-viwer

Config Interface

interface imgZoomViewerConfig {
  imgHeight?: number;
  megnification?: number;
  priviewBoxSize?: {
    height?: number;
  };
}

in order to use config please follow given steps :-

In Template File

  <ngx-img-zoom-viewer [src]="url" [config]="config" > </ngx-img-zoom-viewer>

In TypeScript File

  import { imgZoomViewerConfig } from 'ngx-zoom-viewer';

  ...
    config: imgZoomViewerConfig = {
        imgHeight: 400;  // will fix the size of image
        megnification: 2.5; // will handle magnification of image ( control zooming power )
        priviewBoxSize?: { 
            height?: 350; // handel the height of preview box
        };
    }
  ...

note : - all the css units are in pixel only


License


GNU


Questions


If you have any questions about the project you can reach out to me via email or GitHub with the information below.

Email: sirvaibhavdubay@gmail.com

GitHub : vaibhavdubay

Package Sidebar

Install

npm i ngx-img-zoom-viewer

Weekly Downloads

1

Version

0.13.2

License

GNU

Unpacked Size

114 kB

Total Files

18

Last publish

Collaborators

  • vaibhavdubay