run js on pinch in; run different js on pinch out

Question

I'm trying to develop an interaction I designed where an html element is y-scaled ( scaled in height ) during a pinch so that the height of the element becomes the distance between the two fingers involved in the gesture. For now, I'm trying to listen for a pinch in and fire an alert and then listen for a pinch out and fire a separate alert with jQuery. Do you know how to do this? Perhaps without a plugin?

I've attempted to do this with two plugins. More on the first attempt, later.

What's wrong with the second attempt is that it says a pinch in is a pinch out and even a tap or click is a pinch out.

My second attempt is in this JS Fiddle: http://jsfiddle.net/hnabM/1/

Here is code used in the second attempt:

//pinchZoom is the distance between the two fingers involved in the pinch
var pinchIn = null;
var dist = null;
$('.pinch').swipe({
    pinchIn:function(event, direction, distance, duration, fingerCount, pinchZoom){
        dist = null;
    },
    pinchOut:function(event, direction, distance, duration, fingerCount, pinchZoom){
        dist = null;
    },
    pinchStatus:function(event, phase, direction, distance, duration, fingerCount, pinchZoom){
        if(dist != null){
            if(dist > pinchZoom){
                pinchIn = true;
            }
            else{
                pinchIn = false;
            }
            dist = pinchZoom;
            if(pinchIn === true){
                console.log("pinching in");
            }
            else{
                console.log("pinching out");
            }
        }
        else{
            dist = pinchZoom;
        }
    },
    fingers:2,
    pinchThreshold:0
});

Here is what I did the first attempt. I got it working, but when I combined it with my site, it suddenly didn't work.

The first time I attempted this, I did it with the jQuery version of hammer.js ( http://eightmedia.github.io/hammer.js/ )-- a somewhat famous library for listening for multi-touch gestures. I successfully accomplished it separately apart from the site that I need it to work in. Here it is working on the class .polaroid ( the images ), try pinching in on them and they y-scale down and pinching out on them fires an alert: http://goo.gl/oOQDH0. However, when I apply the same exact js in the site, the site I need it to work in, it suddenly doesn't work. All the dependencies are there. No errors. Also scrolling is somewhat inhibited ( tough to do on touch devices ) for some-reason. It is same exact code applied to the .dataCard class ( the white rectangles under the header ), but failing to work: http://goo.gl/dagKxT

I would greatly, greatly appreciate any and all help in getting this interaction developed and working. Thanks in Advance!

Answer 1

Not to dismiss or discourage you from doing so but is there any particular reason why you are writing this yourself?

In any case take a look at hammer.js https://github.com/EightMedia/hammer.js

Which supports/emulates a lot of the common touch gestures out there. Including pinch to zoom. It's there on their example pages:

https://github.com/EightMedia/hammer.js/blob/master/examples/pinchzoom.html

You've probably done your research and seen lots of libraries like this but Hammer's code base is really well laid out and easy to figure out.

If you're going to give this a go from scratch you will probably end up detecting a gesture at the start and locking it down with a common flag (so other gestures don't kick in) then resetting the flag when the gesture completes.