Pinch-zoom with Hammer.js

Question

With full credit to Michael Chaize's and his tutorial (http://creativedroplets.com/html5-and-multitouch-hammer-js/), I have been working on adapting his code to zoom a picture in a fixed device width webapp.

The code below works great for a single image but I am stumped on how to get it to work for a dynamically generated list of images in my rails app.

For illustration, the code below includes a fully working sample page where the javascript is tied explicitly to the first image displayed. I would like the code to be able to detect which image is being selected so that any image in the page can be zoomed (currently the second image is ignored because I don't know how to elegantly associate the javascript to multiple images on the page).

Hammer.js is included in the header (although not shown in the code clip) and is working correctly on the first image.

As you can tell from the question, javascript is not my forte so any pointers would be greatly appreciated.

<div id="zoomwrapper1">
  <div id="zoom1" class="zoomProps" >
    <div id="rect1" class="polaroid">
        <img id="rect" src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" width="100%" ondragstart="return false" alt="" />
        <span>Sample</span>
    </div>
  </div>
</div>

<div id="zoomwrapper2">
  <div id="zoom2" class="zoomProps" >
    <div id="rect2" class="polaroid">
        <img id="rect2" src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" width="100%" ondragstart="return false" alt="" />
        <span>Sample</span>
    </div>
  </div>
</div>


<script>

    var hammertime = Hammer(document.getElementById('zoomwrapper1'), {
            transform_always_block: true,
            transform_min_scale: 1,
            drag_block_horizontal: true,
            drag_block_vertical: true,
            drag_min_distance: 0
        });

        var posX=0, posY=0,
            lastPosX=0, lastPosY=0,
            bufferX=0, bufferY=0,
            scale=1, last_scale,
            rotation= 1, last_rotation, dragReady=0;

        hammertime.on('touch transform', function(ev) {
            elemRect = document.getElementById('zoom1');
            manageMultitouch(ev);
        });


    function manageMultitouch(ev){

    switch(ev.type) {
        case 'touch':
            last_scale = scale;
            last_rotation = rotation;

            break;

        case 'drag':
                posX = ev.gesture.deltaX + lastPosX;
                posY = ev.gesture.deltaY + lastPosY;
            break;

        case 'transform':
            rotation = last_rotation + ev.gesture.rotation;
            scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));
            break;

        case 'dragend':
            lastPosX = posX;
            lastPosY = posY;
            break;
    }

    var transform =
            "translate3d("+posX+"px,"+posY+"px, 0) " +
            "scale3d("+scale+","+scale+", 0) ";

    elemRect.style.transform = transform;
    elemRect.style.oTransform = transform;
    elemRect.style.msTransform = transform;
    elemRect.style.mozTransform = transform;
    elemRect.style.webkitTransform = transform;
}
</script>

Answer 1

If you want to work with multiple elements, add the hammer to the container and then on the listener function, check for the corresponding elements:

<div id="box-container">
    <div id="box0" class="box">1</div>
    <div id="box1" class="box">2</div>
    <div id="box2" class="box">3</div>
    <div id="box3" class="box">4</div>
    <div id="box4" class="box">5</div>
</div>

In JavaScript

var hammertime = Hammer(document.getElementById("#box-container"));

hammertime.on('desired-event', function(evt) {

    if(evt.target.className.indexOf("box") > -1);

        //do the stuff

    }

});

Here you have a working example using jQuery (test it on multitouch device):

jsfiddle