A minimal Angular 2 image zoom directive.

To install this library, run:

$ npm install ng2-zoomable --save

Online demo is available on repo's GitHub Pages. There will be a more sophisticated demo page sometime in future :)

To run a local demo, first clone/download this repo and then inside local directory:

$ npm install
$ npm run demo

After installation is over, load https://localhost:8080/ in your browser.

First, import the ZoomableDirective directive:

import { ZoomableDirective } from 'ng2-zoomable';

Then, add ZoomableDirective to your modules declarations array:

@NgModule({
    declarations : [AppComponent, ZoomableDirective, ...],
})

Then just add the [zoomable] tag to your img element:

<img [zoomable]='zoomOptions' [src]='imageSource'>

If you want to specify source of larger image to be used for zoomed view then add [zoomableSrc] tag to your img element:

<img [zoomable]='zoomOptions' [zoomableSrc]='largeImageSource' [src]='imageSource'>

zoomOptions is an optional object in this format:

peepView: {
  borderColor: '#fff',
  borderWidth: '2px',
  borderStyle: 'solid',
  cursor: 'zoom-in',
},
settings: {
  zoom: 4   // 4x zoom
}

You may choose to include/exclude any of these properties to style the boxes.

MIT © Moe Hosseini