All geek questions in one place

JQuery for mobile / javascript to increase size for Android and iPad

I was looking for a simple solution on how an image (png) can be enlarged and reduced without affecting the rest of the website but not detecting it.

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

Looked at the jQuery Mobile Pinch Zoom Image Only and the links provided, but apparently for those using PhoneGap.

Thanks for any help.

+4
source share
2 answers

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 the desktop with +/- and mouse movement)

<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>
+5
source

I would put the image in the “viewport” layer, which is used to maintain the flow of your page. A viewport would have an overflow CSS property set to hidden to achieve this.

You can then use JavaScript to detect multiple touches, and then scale the image as needed. I still need to use these frameworks, but it seems very cool and can help make it easier for you: https://github.com/HotStudio/touchy

You can also detect multiple touches without a frame by observing the event.touches array inside the event handler for touchmove . For each touch that event.touches simultaneously, event.touches will be another index in the event.touches array.

Using Touchy seems pretty simple (untested):

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

Source: https://habr.com/ru/post/1438993/

More articles:


All Articles