CODEWITHSUNDEEP
htmlcssjquery-mobiletouchmulti-touch
WhatsInAName
WhatsInAName

Reputation: 724

jQuery mobile/JavaScript image pinch zoom for android and iPad

I have been searching for an uncomplicated solution to how an image (png) can be zoomed in and out without affecting the rest of the website, but found none.

Have any of you used such a tool or know a way to do this using jQuery or javascript? I am very new to jQuery, so don't know what events I should look at. This functionality should work on both android tablets and iPad.

Looked at JQuery Mobile Pinch Zoom Image Only and the links provided but apparently those are for the ones using PhoneGap.

Thanks for any help.

Upvotes: 4

Views: 24240

Answers (2)

rombdn
rombdn

Reputation: 111

I did not find a solution either so I implemented it myself (using vanilla JS and canvas but portable to css3) : https://github.com/rombdn/img-touch-canvas

Example : http://www.rombdn.com/img-touch-canvas/demo (better with a touch device but works on desktop with +/- and mouse drag)

<html>
<body>
    <div style="width: your_image_width; height: your_image_height">
        <canvas id="mycanvas" style="width: 100%; height: 100%"></canvas>
    </div>

    <script src="img-touch-canvas.js"></script>
    <script>
        var gesturableImg = new ImgTouchCanvas({
            canvas: document.getElementById('mycanvas'),
            path: "your image url"
        });
    </script>
</body>
</html>

Upvotes: 8

Jasper
Jasper

Reputation: 76003

I would place the image in a "viewport" layer that is used to maintain the flow of your page. The "viewport" element would have it's overflow CSS property set to hidden to achieve this goal.

You can then use JavaScript to detect multiple touches and then scale the image as necessary. I have yet to use this frameworks but it seems very cool and could help make this easier on you: https://github.com/HotStudio/touchy

You can also detect multiple touches without a framework by watching the event.touches array inside an event handler for touchmove. For each touch occurring simultaneously there will be another index in the event.touches array.

Using Touchy seems pretty easy (untested):

var handleTouchyPinch = function (e, $target, data) {
    $target.css({'webkitTransform':'scale(' + data.scale + ',' + data.scale + ')'});
};
$('#my_div').bind('touchy-pinch', handleTouchyPinch);

Upvotes: 0

Related Questions