angular2-image-zoom

Angular 2.x.x Compatible

Installation

To install this library, run:

$ npm install angular2-image-zoom --save

Examples

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

Options

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!

TODO

1. Create unit and E2E tests
2. ~~Allow window to be placed anywhere~~
3. ~~Show viewing lens over image to show zoom area~~
4. ~~Allow mouse scrolling to change zoom level~~
5. ~~Allow inner zoom lens~~
6. Lots more....

Development

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

$ npm run tsc

License

MIT © Nick Richardson