https://github.com/anitasv/zoom
Javascript library to do pinch zoom that preserves scale and rotation correctly.
https://github.com/anitasv/zoom
javascript-library npm-module pinch pinch-to-zoom rotate rotate-images touch zoom zoom-images
Last synced: about 2 months ago
JSON representation
Javascript library to do pinch zoom that preserves scale and rotation correctly.
- Host: GitHub
- URL: https://github.com/anitasv/zoom
- Owner: anitasv
- License: mit
- Created: 2016-02-24T07:32:44.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2023-04-03T14:11:33.000Z (almost 3 years ago)
- Last Synced: 2025-10-13T10:45:05.222Z (5 months ago)
- Topics: javascript-library, npm-module, pinch, pinch-to-zoom, rotate, rotate-images, touch, zoom, zoom-images
- Language: JavaScript
- Size: 76.2 KB
- Stars: 149
- Watchers: 6
- Forks: 21
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Zoom it!
Allows your users to zoom, rotate, and pan images using touch gestures.
For a DEMO open this on mobile: http://anitasv.github.io/zoom/
Type| Link | Size
-|-|-
Minified | http://anitasv.github.io/zoom/zoom-1.0.7.min.js | 2472 bytes (gzip: 1155 bytes)
Debugging | http://anitasv.github.io/zoom/zoom-1.0.7.js | 12893 bytes
NPM | https://www.npmjs.com/package/zoom-it |
For an explanation of math see https://github.com/anitasv/zoom/wiki/Explaining-Math
Send pull requests, bug reports, and feature requests to https://github.com/anitasv/zoom/
# Usage
```html
```
The overflow:hidden is to crop the image moving outside the original border. Be creative. Hotlinking to github.io may get you blocked; so copy to your own location.
```js
var elem = document.getElementById('torotate');
var zm = new Zoom(elem, {
rotate: true
});
// after use, call to remove event listeners, etc:
zm.destroy()
```
Pan cannot be currently disabled, there is an outstanding issue on it.
You can do operations like zm.reset() on this object, by default it attaches listeners to the object given.
Optionally pass a `window`-like object as the third parameter (e.g. for testing,
or use in a non-browser environment).
If you are using NPM, then
```js
var zoom = require("zoom-it");
var elem = document.getElementById('torotate');
var zm = new zoom.Zoom(elem, {
rotate: true,
minZoom: 0,
maxZoom: Infinity,
pan: false,
});
```