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. |