angular2-image-zoom

    1.2.1 • Public • Published

    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

    Install

    npm i angular2-image-zoom

    DownloadsWeekly Downloads

    944

    Version

    1.2.1

    License

    MIT

    Last publish

    Collaborators

    • brtnshrdr