CODEWITHSUNDEEP
jqueryipadpinchzoompan
Dom Adams
Dom Adams

Reputation: 21

Pan Zoomed Image on Ipad using Javascript

I am writing a jquery plugin that allows users to pinch and zoom into an image. The user can then pan around the image using one touch.

I have got it all working but the panning around the image is very fast and I need to slow this down. I was hoping someone may have some suggestions. Unfortunately I am not allowed to use some of the libraries out there such as hammer JS.

Here is the code for panning around the image.

var pos = $this.position();

var top = (pos.top + (orig.changedTouches[0].pageY - offsetPos.y)),
    left = (pos.left +(orig.changedTouches[0].pageX - offsetPos.x));

    //Apply Limits to keep image in viewport
    var viewWidth =  ($this.parent().width());
    var X_LIMIT = viewWidth - $this.width();
    var viewHeight =  ($this.parent().height());
    var Y_LIMIT = viewHeight - $this.height();

    if (left > viewWidth) { left = viewWidth; }
    if (left < X_LIMIT) { left = X_LIMIT; }
    if (top > viewHeight) { top = viewHeight; }
    if (top < Y_LIMIT) { top = Y_LIMIT; }

    if(top >0){top = 0;}
    if(left >0){left = 0;}

    $this.css({
        top: top,
        left: left
    });

Any help would be much appreciated.

Upvotes: 1

Views: 504

Answers (1)

Dom Adams
Dom Adams

Reputation: 21

I managed to work this out. Should anyone need something like this in the future. The code is attached below.

var orig = e.originalEvent;
if(e.type == 'touchstart'){
    if(orig.touches.length == 1){
        touches = 1;
        origX = orig.targetTouches[0].pageX;
        origY = orig.targetTouches[0].pageY;
    }else if(orig.touches.length == 2){
        touches = 2;
    }
}else if(e.type == 'touchmove'){
    e.preventDefault();

    if(touches == 1){
    /*=================================================*\
    Detect Single Touch and pan around image accordingly
    \*=================================================*/
    width = $zoomImg.width();
    height = $zoomImg.height();

    if(width> originalWidth || height> originalHeight){
        e.stopPropagation();

        var delX = (orig.targetTouches[0].pageX - origX)/settings.sensitivity,
            delY = (orig.changedTouches[0].pageY - origY)/settings.sensitivity,
            pos = $zoomImg.position(),
            left = pos.left + delX,
            top = pos.top + delY,
            viewWidth =  ($this.parent().width()),
            X_LIMIT = viewWidth - width,
            viewHeight =  ($this.parent().height()),
            Y_LIMIT = viewHeight - height;


            //Apply Limits to keep image in viewport
            if (left > viewWidth) { left = viewWidth; }
            if (left < X_LIMIT) { left = X_LIMIT; }
            if (top > viewHeight) { top = viewHeight; }
            if (top < Y_LIMIT) { top = Y_LIMIT; }

            if(top >0){top = 0;}
            if(left >0){left = 0;}

            $zoomImg.css({
                top: top,
                left: left
            });
        }
    }
}

Upvotes: 1

Related Questions