6 Replies Latest reply on Mar 30, 2017 12:40 AM by jerryw36142177

    Pinch Pan & Zoom on a specific DIV; hybrid app SOLVED

    g.bollmann Level 1

      I needed to pan and zoom on a single div while everything else stayed frozen in place. In a hybrid app you need to control what moves. People expect some things never to move. Extra problem for me: I use SVG composition, not a single image. This solution does not rely on swapping or even setting images. This zooms on like a native app does in that it doesn't just scale up. It doesnt' mess up the layout.


      I spent DAYS working through things, so I thought I'd publish what I figured out.



      1) GitHub: download JQuery Panzoom plugin from GitHub.

      Load it in the scripts panel of EA. It's pretty darn small. 12K or so.

      (Obviously, you need jQuery already in the project).


      2) In HTML

      This prevents the PhoneGap Build app (the entirety of the app) from being zoomable.


      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no"/>


      3) In CR

      This is set to pan only when zoomed. From the GitHub examples you can inspect the page to see the correct settings for other usage.


      note: indeed not "sym.$(



        minScale: 1,

        panOnlyWhenZoomed: true,  // minScale must be 1 according to my tests

        increment: 0.4,

        startTransform: 'scale(1)',

        $reset: $(".reset-panzoom, button.reset-panzoom"),   // give your reset button the class ".reset-panzoom"

        onEnd: function(){

              $(".zoomTargetGroup").panzoom( 'zoom', {increment: .01});}




      4) In the Composition

      a) Place your zoomable DIV inside a wrapper DIV. Put the zoom class on the wrapper. Zoom the wrapper, not your target. My structure is:

      ->zoomContainer  (100% W 100%H)

      --> zoomTargetGroup (100% W 100%H)  Class: zoomTargetGroup

      ---> zoomTarget (fixed sizes)


      b) give your reset button the class ".reset-panzoom"



      It maybe necessary to make your stage position:absolute.



      In my heavily nested SVGs, there is still a very slight softness on zoom. The purpose of the onEnd function is to cause a repaint. It was the best of all tried solutions.  If your SVGs are not nested, they will be exactly sharp according to my tests.  According to my research, heavily nested and overlapping elements are definitely like this. Something about the composite layer and GPU.



      Summary of other options

      • zoom3d     also worked, but not as well for me
      • SVGpanzoom     didn't have success initializing, etc.
      • various others      image based or must specifiy dimensions or ...


      • hammerJS      I didn't realize it for a while (sleepless), but this *just* recognizes pinch-zoom, etc. You can attach your own code. It does not do any zooming. It is purely a detector/recognizer.
      • touchSwipe     also a detector/recognizer




      Magnify enlarge pan zoom panzoom pinch-zoom plugin


      Cordova / Apache / PhoneGap Build