How can I pan an image larger than its container correctly using jQuery?

Question

I'm creating quite a cool image viewer but am stuck in one particular part: panning the image when zoomed in. It seems a trivial problem and I've tried out pretty much all answers to similar questions on SO, but each time, something isn't working right. I need a fresh pair of eyes.

I've temporarily opened a URL on my dev server. Have a look at this page:

[URL closed]

Next, move up your mouse wheel to trigger the zoom. Here we are. Once zoomed in, click and drag to try and pan the image. It is panning alright, but something isn't right. This is currently the code used for the panning:

var clicking = false;
var previousX;
var previousY;

$("#bigimage").mousedown(function(e) {

    e.preventDefault();
    previousX = e.clientX;
    previousY = e.clientY;
    clicking = true;
});

$(document).mouseup(function() {
    clicking = false;
});

$("#bigimage").mousemove(function(e) {

    if (clicking) {
        e.preventDefault();
        var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
        var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
        $("#bigimage").scrollLeft($("#bigimage").scrollLeft() + 10 * directionX);
        $("#bigimage").scrollTop($("#bigimage").scrollTop() + 10 * directionY);
        previousX = e.clientX;
        previousY = e.clientY;
    }
});

The solution I'm looking for has these characteristics:

• Correct direction of panning over the X and Y axis
• It should not be possible to pan outside the edges of the image
• Reasonably fluent panning
• Nice to have: window resize should not cause any issues

Although I appreciate any help I can get, please don't point me to a generic plugin, I've tried too many of them that I am in search of an answer that works for my specific scenario. I'm so desperate I'll even set a money bounty for the perfect solution that meets the characteristic above.

PS: Please try the link in Firefox or a Webkit browser

Answer 1

I have put together a jsFiddle which does what I think you want it to do.

http://jsfiddle.net/CqcHD/2/

It satisfies all 4 of your criteria. Let me know if I have misinterpreted your expected result