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

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