Ngx-magnifier NPM

NgxMagnifier

NgxMagnifier is a seamless zoom and magnify images on your website. Ideal for product showcases, galleries, and detailed image inspections, this library offers customizable options to enhance user experience with minimal configuration.

Versions

Angular	ng-select
>=13.0.0 <14.0.0	v2.x
>=12.0.0 <13.0.0	v1.x

Getting started

Step 1: Install `ngx-magnifier`:

NPM

npm install ngx-magnifier

Step 2: Import the NgxMagnifierModule module:

import { NgxMagnifierModule } from 'ngx-magnifier';

@NgModule({
  declarations: [AppComponent],
  imports: [NgxMagnifierModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

In template use ngx-magnifier component with your options

<!-- ngx-magnifier -->
<ngx-magnifier [magWidth]="170" [magHeight]="170" [magPos]="3" [magZoom]="3"
imgSrc='img path' imgHeight='600' imgWidth='700'></ngx-magnifier>

Config

Inputs

Input	Type	Default	Required	Description
magWidth	`Number`	`0`	yes	It allows to increase the width of the magnifier lens
magHeight	`Number`	`0`	yes	It allows to increase the height of the magnifier lens
magPos	`Number`	`0`	no	This allows positioning of the magnified image
magZoom	`Number`	`0`	yes	This allows you to zoom in or out of the zoomed image
imgSrc	`string`	`0`	yes	Image path
imgHeight	`string`	`0`	yes	It allows you to increase the height of the image in values or percentages.
imgWidth	`string`	`0`	yes	It allows you to increase the width of the image in values or percentages.