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

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!