ngx-img-zoom-viewer/README.md

The NGX IMG Zoom Viewer is a Angular library that can help to create a magnified preview of any image in any kind of angular app

# NGX IMG Zoom Viewer ![Project License Badge](https://img.shields.io/badge/license-GNU-brightgreen)

## 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](#installation)
- [Use](#use)
- [Config](#config)
- [License](#license)
- [Questions](#questions)

---

## Installation

---

## Step 1 : -

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

<pre>
  npm i ngx-img-zoom-viewer
</pre>

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

## Step 2 : -

Add NGXimgZoomViewer in your app.module.ts file

<pre>
  import { NGXImgZoomViewerModule } from 'ngx-img-zoom-viewer'

  @NgModule ({
    ...,
    imports: [
      ...,
      NGXImgZoomViewerModule
    ],
    ...
  })
  ...
</pre>

---

## Use

---

Now we are Free to use NGXimgZoomViewer
we can start using it by just adding
</br>

## In template

<pre>
  &lt;ngx-img-zoom-viewer [src]=&quot;url&quot; &gt; &lt;/ngx-img-zoom-viewer&gt;
</pre>

## In TypeScript class

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

---

## Config

---

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

## Config Interface 

<pre>
interface imgZoomViewerConfig {
  imgHeight?: number;
  megnification?: number;
  priviewBoxSize?: {
    height?: number;
  };
}
</pre>

in order to use config please follow given steps :-
<br>

## In Template File

<pre>
  &lt;ngx-img-zoom-viewer [src]=&quot;url&quot; [config]=&quot;config&quot; &gt; &lt;/ngx-img-zoom-viewer&gt;
</pre>

## In TypeScript File

<pre>
  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
        };
    }
  ...
</pre>

note : - all the css units are in pixel only

---

## License

---

[GNU](https://github.com/vaibhavdubay/ngx-img-zoom-viewer/blob/main/LICENSE)

---

## 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](https://github.com/vaibhavdubay)