document.getElementsByClassName('zoomer-start')[0].addEventListener('click', init);

    document.getElementsByClassName('zoomer-reset')[0].addEventListener('click', reset);

    function init() {
        var images = document.querySelectorAll('.zoomer-img');

        for (var i = 0; i < images.length; i++) {
            (function() {
                var image = images[i];

                var zoomer = new Hammer(image);

                zoomer.get('pinch').set({enable: false});
                zoomer.get('pan').set({enable: false});

                var clicked = false;

                var adjustScale = 1;
                var adjustDeltaX = 0;
                var adjustDeltaY = 0;

                var currentScale = null;
                var currentDeltaX = null;
                var currentDeltaY = null;

                zoomer.on('tap', function (e) {
                    if (!clicked) {
                        zoomer.get('pinch').set({enable: true});
                        zoomer.get('pan').set({enable: true, direction: Hammer.DIRECTION_ALL});
                        clicked = true;
                    } else {
                        zoomer.get('pinch').set({enable: false});
                        zoomer.get('pan').set({enable: false});
                        clicked = false;
                    }

                    if (currentScale > 1) {
                        adjustScale = 1;
                        adjustDeltaX = 0;
                        adjustDeltaY = 0;
                    } else {
                        adjustScale = 2;
                    }

                    currentScale = adjustScale * e.scale;
                    currentDeltaX = adjustDeltaX + (e.deltaX / currentScale);
                    currentDeltaY = adjustDeltaY + (e.deltaY / currentScale);

                    image.style.transform = 'scale(' + currentScale + ') translate3d(' + currentDeltaX + 'px, ' + currentDeltaY + 'px, 0)';
                });

                zoomer.on('pan pinch', function (e) {
                    currentScale = Math.max(1, Math.min(adjustScale * e.scale, 4));
                    currentDeltaX = adjustDeltaX + (e.deltaX / currentScale);
                    currentDeltaY = adjustDeltaY + (e.deltaY / currentScale);

                    var scaledX = ((((image.width * currentScale) / 2) - (image.width / 2)) / currentScale);
                    if (currentDeltaX > scaledX)
                        currentDeltaX = scaledX;
                    if (currentDeltaX < -scaledX)
                        currentDeltaX = -scaledX;

                    var scaledY = ((((image.height * currentScale) / 2) - (image.height / 2)) / currentScale);
                    if (currentDeltaY > scaledY)
                        currentDeltaY = scaledY;
                    if (currentDeltaY < -scaledY)
                        currentDeltaY = -scaledY;

                    image.style.transform = 'scale(' + currentScale + ') translate3d(' + currentDeltaX + 'px, ' + currentDeltaY + 'px, 0)';
                });

                zoomer.on('panend pinchend', function () {
                    adjustScale = currentScale;
                    adjustDeltaX = currentDeltaX;
                    adjustDeltaY = currentDeltaY;
                });

                function reset() {
                    zoomer.get('pinch').set({enable: false});
                    zoomer.get('pan').set({enable: false});

                    clicked = false;

                    adjustScale = 1;
                    adjustDeltaX = 0;
                    adjustDeltaY = 0;

                    currentScale = null;
                    currentDeltaX = null;
                    currentDeltaY = null;

                    image.style.transform = 'scale(' + 1 + ') translate3d(' + 0 + 'px, ' + 0 + 'px, 0)';
                }
            })();
        }
    }