angular2-image-zoom

Angular 2.x.x Compatible

Installation

To install this library, run:

$ npm install angular2-image-zoom --save

First, import the ImageZoom Module

import {ImageZoomModule} from 'angular2-image-zoom';

Then, add ImageZoom to your modules import array

@NgModule({
    imports : [CommonModule, ImageZoomModule, ...],
})

Then just add the [imageZoom] tag to your img element

<img [imageZoom]="zoomedImageSrc" [src]="smallImageSrc" [style.width.px]="width" [style.height.px]="height">

Name	Type	Default	Description
imageZoom	string	null	Link to larger [src] image
allowZoom	boolean	true	Whether or not zooming is enabled
clickToZoom	boolean	false	Force a user to click before zooming begins, click again to stop zooming
scrollZoom	boolean	true	Allow mousewheel to change zoom level
windowPosition	number	1	Position of zoom window. (1-16)
lensStyle	string	'WINDOW'	Type of zoom ('LENS', 'WINDOW')
lensWidth	number	300	Width of zoom lens
lensHeight	number	300	Height of zoom lens
lensBorder	number	2	Size of lens border (in pixels)
delay	number	100	Delay before zoom lens appears (in milliseconds)
zoomLevel	number	auto-calculated	Initial zoom level (smaller number indicates larger zoom)
minZoomLevel	number	.2	TODO
maxZoomLevel	number	auto-calculated	TODO
zoomLevelIncrement	number	.1	Size of each change in zoom level while scrolling

This library is a work in progress and any issues/pull-requests are welcomed!

To generate all * }.js, *.js.map and *.d.ts files:

$ npm run tsc