brtnshrdr / angular2-image-zoom

An Angular2 Image Zoom Directive
MIT License
22 stars 16 forks source link

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)
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!

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