Angular 2.x.x Compatible
To install this library, run:
$ npm install angular-image-zoom --saveFirst, import the ImageZoom Module
import {ImageZoomModule} from 'angular-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) |
| 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 tscMIT