Hammerjs image zoom

by HYEONGJINKIM

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<div style="-webkit-transform: translate3d(0,0,0);overflow: hidden;" class="zoomable">
    <img src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" />
</div>

JavaScript

(function ($) {

    $(document).ready(function () {


        var scale = 1; // scale of the image
        var xLast = 0; // last x location on the screen
        var yLast = 0; // last y location on the screen
        var xImage = 0; // last x location on the image
        var yImage = 0; // last y location on the image

        Hammer($('.zoomable img').get(0)).on("tap", function (event) {

            var posX = event.gesture.center.pageX;
            var posY = event.gesture.center.pageY;


            // find current location on screen 
            var xScreen = posX; //- $(this).offset().left;
            var yScreen = posY; //- $(this).offset().top;

            // find current location on the image at the current scale
            xImage = xImage + ((xScreen - xLast) / scale);
            yImage = yImage + ((yScreen - yLast) / scale);

            scale++;

            // determine the location on the screen at the new scale
            var xNew = (xScreen - xImage) / scale;
            var yNew = (yScreen - yImage) / scale;

            // save the current screen location
            xLast = xScreen;
            yLast = yScreen;

            // redraw
            $(this).css('-webkit-transform', 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')')
                .css('-webkit-transform-origin', xImage + 'px ' + yImage + 'px').css('-moz-transform', 'scale(' + scale + ') translate(' + xNew + 'px, ' + yNew + 'px)').css('-moz-transform-origin', xImage + 'px ' + yImage + 'px')
                .css('-o-transform', 'scale(' + scale + ') translate(' + xNew + 'px, ' + yNew + 'px)').css('-o-transform-origin', xImage + 'px ' + yImage + 'px').css('transform', 'scale(' + scale + ') translate(' + xNew + 'px, ' + yNew + 'px)');
        });

    });



})(jQuery);