https://github.com/brtnshrdr/angular2-image-zoom

An Angular2 Image Zoom Directive
https://github.com/brtnshrdr/angular2-image-zoom

Last synced: 3 months ago
JSON representation

An Angular2 Image Zoom Directive

• Host: GitHub
• URL: https://github.com/brtnshrdr/angular2-image-zoom
• Owner: brtnshrdr
• License: mit
• Created: 2016-06-17T20:59:15.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-10-03T19:45:18.000Z (about 6 years ago)
• Last Synced: 2024-07-11T19:51:09.663Z (4 months ago)
• Language: TypeScript
• Size: 67.4 KB
• Stars: 22
• Watchers: 6
• Forks: 16
• Open Issues: 15
• Metadata Files:
  • Readme: README.MD
  • License: LICENSE

Awesome Lists containing this project

• awesome-ionic2-components - Image Zoom
• Awesome - Image Zoom

README

        
# angular2-image-zoom

Angular 2.x.x Compatible

## Installation

To install this library, run:

```bash

$ npm install angular2-image-zoom --save

```

## Examples

First, import the ImageZoom Module

```typescript

import {ImageZoomModule} from 'angular2-image-zoom';

```

Then, add ImageZoom to your modules import array

```typescript

@NgModule({

    imports : [CommonModule, ImageZoomModule, ...],

})

```

Then just add the [imageZoom] tag to your img element

```html



```

# 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:

```bash

$ npm run tsc

```

## License

MIT © [Nick Richardson]([email protected])