anitasv/zoom

Javascript library to do pinch zoom that preserves scale and rotation correctly.

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

<div width=320 height=240 style="overflow:hidden;">
    <!-- this doesn't have to be an image -->
    <img id="torotate" width=320 height=240 src="https://lh3.googleusercontent.com/w33i78Rt0j4GHr7SA1luYtBAtmC1DmRHwobUcK1wCKivA_u4VczsDw0CweLmJpUwFRUs=w1920-h1200-no">
</div>

<script type="text/javascript" src="http://anitasv.github.io/zoom/zoom-1.0.7.min.js"> </script>

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.

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

var zoom = require("zoom-it");

var elem = document.getElementById('torotate');
var zm = new zoom.Zoom(elem, {
    rotate: true,
    minZoom: 0,
    maxZoom: Infinity,
    pan: false,
});

zoom's Issues

Max and Min Scale

Hello there! Thank you for such a great library. It was really what I need and very light-weight comparing the others. Yet what I would like to see is an option that I can set max and min scale values. I would be appreciated if you can help me with that.

Need mouse wheel features

This is a best and smallest library I've found.. +1

I would be awesome if one may add zoom in/out on mouse wheel rotations.

Could you add explanation.

I ran application on mobile and looked at the code on mobile too. I am scratching my head at mathematics. Could you please add explain mathematics, js and css behind it?

Maybe a blog post or in readme file.

Licence

Could you please add a licence file with your choosen licence?
Thanks in advance

select multiple IDs

Hello, i've just tried many ways but i can't figure out how to select multiple ids...
like this way
var el = document.getElementById('zoom_' + (i+1)); var zm = new Zoom(el, { pan: true, rotate: false });
another
var el = document.querySelectorAll('#zoom_1, #zoom_2, #zoom_3' ); ...
also i've just tried with class
var el = document.getElementsByClassName('image'); ...
also created a for loop, but probably i'm not a javascript genius...
someone can give me a little help?
thankyou :)

can you better document the API and the event ?

Hi, Thanks for that genius libaray I try to get my head around it and check if it have all I need.
or at least throw some events that I can response.

Can you better document the lib ?

is it possible set zoom by js code and fix it?

Hello

I want to change zoom of a div by this library and fix it (no zoom , no pan, no rotate), Is it possible something like this:

		var zm = new Zoom(elem, {
			zoom:false,
			pan: false,
			rotate: false
		});	
		zm.zoom(x);

disable pan and button click not working

Hello

1. I want only zoom, i disabled pan and rotate both but still pan is working.

2. I used on a div, there are some buttons on div, button click not working.

var elem = document.getElementById('crossword'); var zm = new Zoom(elem, { pan: false, rotate: false });

Please advice.
Thank you

no not work

it seems to not work in url

Verify and release in flight touch changes project.

Merge in_flight_stage branch to master after verification.

https://github.com/anitasv/zoom/tree/in_flight_stage

After merging to master I can push to NPM.

Scaling limits and panning boundaries prototype

Brilliant library, math is not my strong point, but I was able to get my head round what the interactive functions were doing.

In two days I had to implement a pinch and zoom library with scaling and panning boundaries and I've pushed the code to this repo; https://github.com/dalyr95/zoom

Feel free to implement anything that catches your eye and if you have any questions let me know. It needs to be cleaned up massively and the math done by someone whose actually good at it.

Demo here; https://github.com/dalyr95/zoom

Unable to test in mobile device

zooms in the whole page and it is not known if it works or not

After rotate, pan is broken

Example

1. Rotate image about 45°
2. Lift fingers
3. Pan vertically down

Expect: rotated image to pan down (-90°)
Result: image pans along -45°

It is panning "down" in the reference frame of the image when it should be panning in the reference frame of the canvas.

Zoom element to be panned with touchmove on another element?

This Zoom project is awesome, and I am using it for prototyping in my project. I wish to implement a feature where I can touchmove on a 100px X 100px div that activates panning of a div/image container attached to the Zoom function. There is so much brilliant math in your code that I haven't the slightest brilliant clue where to start, lol.

So I was wondering, is the following piece of code enough to modify for my needs? I only need to touchmove (for panning of element) with one finger only on the 100px X 100px div, with the last touchmove (perhaps on touchend) position of panned element being used as touchstart coordinates before touchmove is used again :

var getCoordsSingle = function(t) {
        var oX = elem.offsetLeft;
        var oY = elem.offsetTop;
        var x = t[0].pageX - oX;
        var y = t[0].pageY - oY;
        return [
            [x, y],
            [x + 1, y + 1]
        ];
    }; 

It would be awesome if you could guide me in modifying your code or any other part of code so I could get this feature to work. I am basically implementing a "turbo" option for tablets where a simple slide of the thumb on the small div would pan the element attached to the zoom function in any direction the thumb is sliding, regardless of zoom applied to the attached element. Of course, the speed of the panning would be governed by a variable I could change. I have already implemented these features on some other pan/zoom code designed for desktop/mouse using matrix values, and tried to port them onto your code, but because of code design, nothing works as expected so far.

Any help really appreciated. Thx for awesome project.
dan

UPDATE Feb 12, 2020

Ok, found a solution that does not require a separate div.

Configurability

This is a great library! ⛵️

I'd like to configure it to only (1) pinch-zoom, (2) drag-pane (within the zoomed area) and (3) double-tap to reset, but without rotations.

Is there any plans to add options for rotations/moving?

let myZoom = Zoom(myEl, { rotate: false });

I want to get rid of the one-finger touch feature.

I want to prevent moving with single finger touch or mouse left click. How can I stop it?

I want to use the zoom in and move rotation functions when I touch with two fingers, and I want to disable all functions when I touch with one finger.

Version on NPM not updated to 1.0.7

Hi,

The version of zoom I'm getting when npm installing is 1.0.6.
This version does not contain the 247 - for (k in cfg_def) { -> for (var k in cfg_def) {.
Thus it's not working in TypeScript

Could this be fixed?

Can i add control

Can i add controls '+' and '-'
Have a method to zoom?

http://anitasv.github.io/zoom/ is 404

gh-pages branch is not setup properly.