ngx-zoomify

The ngx-zoomify package is a simple and lightweight npm package that enables magnifying images on hover. It can be easily integrated into any angular application.

Installation

To install the ngx-zoomify package, you can use npm:

npm i ngx-zoomify

Usage

To use the ngx-zoomify package, you need to add the ngx-zoomify tag your HTML document:

<ngx-zoomify [src]="src"></ngx-zoomify>

src Input

The ngx-zoomify package comes with some default interfaces. You need provide the src to render the image.

let src: ZoomifyImage = {
	url: 'image.jpg', //image url from assets folder or CDN
	altText: '' //alt Text for SEO
};

You can customize the image size by providing your own the CSS styles or Tailwind.

<ngx-zoomify [src]="src" class="w-full h-full"></ngx-zoomify>

Compatibility

The ngx-zoomify package works in all modern browsers, including Chrome, Firefox, Safari, and Edge. It may not work in older browsers that do not support CSS variables or CSS transforms.

License

The ngx-zoomify package is released under the MIT License.

npm registry link

ngx-zoomify