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:

    <script src="iscroll-zoom.js"></script>
    <div id="wrapper">
        <div id="scroller">
            <img src="whatever" width="1150" height="1150" />
        </div>
    </div>
    <script>
    var myScroll;
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    setTimeout(function () {
        myScroll = new IScroll('#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).