CODEWITHSUNDEEP
jqueryjquery-mobilepinchzoom
Brock
Brock

Reputation: 103

Pinch ZoomIn/ZoomOut effect on Image using JqueryMobile

I have to add functionality of Pinch ZoomIn/Out effect on image using jqueryMobile Plugin, can any one help?

Thanks alot,

--Brock

Upvotes: 4

Views: 6069

Answers (1)

Gajotres
Gajotres

Reputation: 57309

It is possible on jQuery Mobile, but you will need to use a 3rd party implementation called hammer.js.

It supports a large number of gestures like:

  • hold
  • tap
  • doubletap
  • drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
  • swipe, swipeup, swipedown, swipeleft, swiperight
  • transform, transformstart, transformend
  • rotate
  • pinch, pinchin, pinchout
  • touch (gesture detection starts)
  • release (gesture detection ends)

Example:

$('#test_el').hammer().on("pinchin", ".nested_el", function(event) {
    console.log(this, event);
});

$('#test_el').hammer().on("pinchout", ".nested_el", function(event) {
    console.log(this, event);
});

It works with jQuery Mobile, and that is important. But you should think of some other idea, or at least another idea for Android 2.X devices, because that platform doesn't support multitouch events.

There are also some other 3rd party implementations, like Touchy. Unfortunately, Touchy only supports pinch.

Upvotes: 6

Related Questions