title: Zoom image keeping the center fix with Jquery
body: <p>I have an script that will resize an image with a jquery slider. The image is inside an    overflow hidden conatiner. But I am getting problem in keeping the center of the image fix while zooming out or in. 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-</p>
  
  <pre><code>var globalElement_width;
  var globalElement_height;
  $(document).ready(function(){
     $img=$('.canvas img');
     globalElement_width=$img.width();
     globalElement_height=$img.height();
  
     $( ".slider" ).slider({
         step: 1, 
         min: 0,
         max: 100,
         value: 0,
         slide: function( event, ui )
         {
          resize_img(ui.value);
         }
    });
  
    $('.canvas img').draggable();
  
  });
  function resize_img(val)
  {
      var width=globalElement_width;
      var zoom_percen=width * 0.5; // Maximum zoom 50%
      var ASPECT = zoom_percen / 50;
      var zoom_value = val / 2;
      var size= width + ASPECT * zoom_value;
  
      $img = $('.canvas img');
      $img.stop(true).animate({
          width: size
      }, 250);
  }
  </code></pre>
  
  <p>Jsfiddle-</p>
  
  <p><a href="http://jsfiddle.net/hirenbg89/Qv35B/5/" rel="nofollow">http://jsfiddle.net/hirenbg89/Qv35B/5/</a></p>
  
  <p>Any help? Thanks in advance.</p>