Javascript Image Pan / Zoom

Объединив некоторые CSS и JQuery UI / draggable, я создал возможность панорамирования изображения, а с помощью небольшого дополнительного JS теперь вы можете масштабировать изображение.

Проблема, с которой я столкнулся, заключается в том, что при увеличении изображения левый верхний угол изображения фиксируется, как и следовало ожидать. Я бы хотел, чтобы изображение оставалось в центре (на основе текущего панорамирования), чтобы середина изображения оставалась посередине контейнера, при этом увеличиваясь.

Я написал для этого код, но не работа, я думаю, что моя математика неверна. Может ли кто-нибудь помочь?

Я хочу, чтобы он работал так же, как этот . Когда вы прокручиваете изображение, оно удерживает изображение в центре на основе текущего панорамирования, а не уменьшает масштаб из угла.

HTML:

Javascript:

$("#_popup_creator .user_image").bind('mousewheel', function(event, delta) {
    zoomPercentage += delta;
    $(this).css('width',zoomPercentage+'%');
    $(this).css('height',zoomPercentage+'%');

    var widthOffset = (($(this).width() - $(this).parent().width()) / 2);
    $(this).css('left', $(this).position().left - widthOffset);
});