NGX IMG Zoom Viewer

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)

Installation
Use
Config
License
Questions

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