Zooming an draggable image keeping the center fix

Zooming an draggable image keeping the center fix

I have an script that will resize an image with a jquery slider. The image is inside an overflow hidden container. But I am getting problem in keeping the draggable center of the image fix while zooming out or in. Its working fine while the image is not dragged. I know that can be done by plus minus the left and top value while zooming in out. But can't able to find a way to do it. You can View my script-

  1. var globalElement_width;
  2. var globalElement_height;
  3. $(document).ready(function () {
  4. $img = $('.canvas img');
  5. globalElement_width = $img.width();
  6. globalElement_height = $img.height();
  7. $(".slider").slider({
  8. step: 1,
  9. min: 0,
  10. max: 100,
  11. value: 0,
  12. slide: function (event, ui) {
  13. resize_img(ui.value);
  14. }
  15. });
  16. $('.canvas img').draggable();
  17. });

  19. function resize_img(val) {
  20. var width = globalElement_width;
  21. var zoom_percen = width * 0.5; // Maximum zoom 50% 
  22. var ASPECT = zoom_percen / 50;
  23. var zoom_value = val / 2;
  24. var size = width + ASPECT * zoom_value;
  25. var d = ASPECT * zoom_value / 2;
  26. $img = $('.canvas img');
  27. $img.stop(true).animate({
  28. top: -d,
  29. left: -d,
  30. width: size
  31. }, 250);
  32. }
 Any help? Thanks in advance.