4

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.

Community
  • 1
  • 1
WhatsInAName
  • 724
  • 2
  • 12
  • 32
  • http://stackoverflow.com/questions/12356116/scaling-image-on-pinch-gesture works partially. While the image zooms in and out just fine, you cannot move around within the div to see the other parts of the image. After zooming the image, the user will expect to go to the other end of the image by swiping fingers on the zoomed in image. That does not work. – WhatsInAName Oct 10 '12 at 21:40

2 Answers2

7

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>
rombdn
  • 101
  • 1
  • 7
0

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);
Jasper
  • 75,717
  • 14
  • 151
  • 146
  • I am trying to use touchy as you've suggested but cannot make it work yet. Also, what is a "viewport" layer? I am using viewport meta in the header like this: . Can you give me an example? – WhatsInAName Oct 10 '12 at 20:45
  • In general a "viewport" is the box through which you look to see something. In the context of this question, it means you create a `
    ` (or similar) element that contains your image. You set this "viewport" element to the dimensions you want the image to take on the page. Now you can scale and move the image around without messing with the page's layout because the image doesn't directly affect the page layout anymore. `
    `
     – Jasper Oct 10 '12 at 21:08