Skip to content

Instantly share code, notes, and snippets.

@jshbrntt

jshbrntt/pan-zoom-image.js

Last active October 16, 2018 11:10
Show Gist options
  • Save jshbrntt/f778e4f5a559268a874e to your computer and use it in GitHub Desktop.
Save jshbrntt/f778e4f5a559268a874e to your computer and use it in GitHub Desktop.
Download ZIP
A simple way of panning and zooming an image using Hammer.js.
Raw
pan-zoom-image.js
// <img id="myimage" src="http://placecage/1280/720">
var image = document.getElementById('myimage');
var mc = new Hammer.Manager(image);
var pinch = new Hammer.Pinch();
var pan = new Hammer.Pan();
pinch.recognizeWith(pan);
mc.add([pinch, pan]);
var adjustScale = 1;
var adjustDeltaX = 0;
var adjustDeltaY = 0;
var currentScale = null;
var currentDeltaX = null;
var currentDeltaY = null;
// Prevent long press saving on mobiles.
webpage.addEventListener('touchstart', function (e) {
e.preventDefault()
});
// Handles pinch and pan events/transforming at the same time;
mc.on("pinch pan", function (ev) {
var transforms = [];
// Adjusting the current pinch/pan event properties using the previous ones set when they finished touching
currentScale = adjustScale * ev.scale;
currentDeltaX = adjustDeltaX + (ev.deltaX / currentScale);
currentDeltaY = adjustDeltaY + (ev.deltaY / currentScale);
// Concatinating and applying parameters.
transforms.push('scale({0})'.format(currentScale));
transforms.push('translate({0}px,{1}px)'.format(currentDeltaX, currentDeltaY));
webpage.style.transform = transforms.join(' ');
});
mc.on("panend pinchend", function (ev) {
// Saving the final transforms for adjustment next time the user interacts.
adjustScale = currentScale;
adjustDeltaX = currentDeltaX;
adjustDeltaY = currentDeltaY;
});
@fedyd
Copy link

fedyd commented Mar 15, 2017

Hello,

I am trying to make Hammer to work, but I can't do it neither for a very simple task.
Here is my code
`

    <meta name="msapplication-tap-highlight" content="no" />

    <title>HammerTest</title>

    <style>
        * {
          margin: 0;
          padding: 0;
          border: 0;
        }
        html, body {
          height: 100%;
          width: 100%;
        }
        #test {
          position: relative;
          height: 50%;
          width: 50%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          background-color: rgb(16, 19, 37);
          font-family: Georgia;
          font-size: 60px;
          color: #fff;
        }
        #p1 {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="test">
        <p id="p1">Hello World!</p>
    </div>

    <script src="javascripts\Hammer\hammer.min.js"> </script>

    <!-- Custom gesture manager for touch devices -->
    <script>
        var myElement = document.getElementById("test");

        var mc = new Hammer.Manager(myElement);

        mc.get("pinch").set({ enable: true });

        mc.on("pinch", function(ev) {
            alert(ev);
        });
    </script>

</body>
`

I tested it on old Android (4) and IPad2 devices. I expected to see an alert with the name of the event, but nothing to do.
Where am I wrong?

Thank you very much,
Federico

@fedyd
Copy link

fedyd commented Mar 15, 2017

...the first part of my code has been cutted in my previous message...I wanted to add it here but it is not shown....I don't know why...
Anyway there was the meta tag that suppress the native pinch to zoom function.. i.e.

and the html doctype declaration, the html and head tags openings

@fedyd
Copy link

fedyd commented Mar 15, 2017

Sorry, the meta tag has been still deleted....??

@fedyd
Copy link

fedyd commented Mar 15, 2017

I solved and also posted an answer on Stackoverflow to an user who experienced my same problem. I discovered that console said that the mc.get() returned a null value. As a matter of fact, with my above statements, the mc object.recognizers array was void.
So I used this way to initializate the hammer instance:
var mc = new Hammer.Manager(myElement, { recognizers: [ [Hammer.Pinch, {enable: false}] ] });
and now it works.

@ivanberry
Copy link

Why should recognize pinch and pan? and in my config, the pinch event will always trigger the pan event, This really bother me.

@valentinHruzinski92
Copy link

Maybe somebody knows packages where it is implemented?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment