How To Make Zoom Function Within A Div Tag In Phonegap

I want to know how to make zoom function with phonegap. Recently I tried zoom function with cubiq.org/dropbox/iscroll4/examples/zoom/. It works on samsung galaxy s4, but does't wor

Solution 1:

You had the right idea but your link is to v4 of iScroll. Get the latest version here - http://iscrolljs.com/ - and make sure you look at the examples which include zooming.

Some iScroll libraries are just for scrolling and do not zoom!

I used only the iscroll-zoom.js file in my Phonegap app. Here's my code:

<scriptsrc="iscroll-zoom.js"></script><divid="wrapper"><divid="scroller"><imgsrc="whatever"width="1150"height="1150" /></div></div><script>var myScroll;
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    setTimeout(function () {
        myScroll = newIScroll('#wrapper', {
            zoom: true,
            scrollX: true,
            scrollY: true,
            mouseWheel: true,
            wheelAction: 'zoom'
        });
    }, 100);
</script>

Most of the JS needs to be within onDeviceReady.

This worked in Android (Nexus 7) and iOS (iPhone5).