Pinch Zoom on Phonegap

Pinch Zoom:

For zooming any kind of image on smart phones by pinch , we generally used jQuery and javascript for phonegap. For this we used a jQuery plugin named Hammer.js .

For Pinch zoom it will be necessary the following things.

1.<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

3. hammer.js (attached with this plugin) .

4. hammer.fakemultitouch.js (attached with this plugin) .

5. hammer.showtouches.js (attached with this plugin) .

<script>

        // show touches doesnt work well in older IE versions due lack of support of

        // the pointer-event css property

        if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {

            Hammer.plugins.showTouches();

        }

    </script>

    <!-- <![endif]-->

    <script>

        if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {

            Hammer.plugins.fakeMultitouch();

        }

    var hammertime = Hammer(document.getElementById('pinchzoom'), {

        transform_always_block: true,

        transform_min_scale: 1,

        drag_block_horizontal: true,

        drag_block_vertical: true,

        drag_min_distance: 0

    });

    var rect = document.getElementById('rect');

    var posX=0, posY=0,

        scale=1, last_scale,

        rotation= 1, last_rotation;

    hammertime.on('touch drag transform', function(ev) {

        switch(ev.type) {

            case 'touch':

                last_scale = scale;

                last_rotation = rotation;

                break;

            case 'drag':

                posX = ev.gesture.deltaX;

                posY = ev.gesture.deltaY;

                break;

            case 'transform':

                rotation = last_rotation + ev.gesture.rotation;

                scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));

                break;

        }

        // transform!

        var transform =

                "translate3d("+posX+"px,"+posY+"px, 0) " +

                "scale3d("+scale+","+scale+", 1) " +

                "rotate("+rotation+"deg) ";

        rect.style.transform = transform;

        rect.style.oTransform = transform;

        rect.style.msTransform = transform;

        rect.style.mozTransform = transform;

        rect.style.webkitTransform = transform;

    });

    </script>

For Download the plugin click here