How to zoom image based off JQuery UI range slide value?

Question

I am trying to zoom in and out of an image based off the value of a JQuery UI slider . I have two issues, one I need to keep the image centered as it zooms in and out. And two, sometimes the image scales smaller when it should be scaling larger. That probably has to do with the math involved, but how can I fix this?

You can see my code here.

Here's my HTML:

<div class="zoom-me">
   <img src="http://theartmad.com/wp-content/uploads/Happy-Fairy-Tail-Wallpaper-5.jpg">
  </div>
</div>  
<div id="range5"></div>

Here's my CSS:

img {
   position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
  width:200%;

}
.zoom-me {
  background-color: blue;
    overflow: hidden;
    border: 10px solid white;
    max-width: 400px;
    width: 400px;
    position: relative; 
    display: block;
    margin: 0 auto; 
    height: 260px;
}
#range5 {
  position: absolute;
  width: 300px;
  top: 75%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 0;
  height: 13px;
  -webkit-border-radius: 0%;
  border-radius: 0%;
  background: #e6e7e8;
  outline: none;
}
#range5 .ui-slider-handle{
  position: absolute;
  margin: -18px 0 0 -9px;
  -webkit-border-radius: 0%;
  border-radius: 0%;
  background: #0B5788;
  border: 0;
  height: 20px;
  width: 11px;
  outline: none;
  cursor: pointer;
}
#range5 .ui-slider-range{
  background: #0d78bd;
  height: 13px; 
}

And here's my JS:

$('#range5').slider({
    range: 'min',
    max: 500,
    step: 100,
    value: 50,
    slide: function (e, ui) {
        var cv = $('#range5').slider( "value" );
      $('img').animate({
       width: 200 - cv/5 + "%",
       height: 200 - cv/5 + "%"},500);

    } 
});

Answer 1

Your image scales smaller, not larger, because of these lines:

width: 200 - cv/5 + "%",
height: 200 - cv/5 + "%"},500);

The maximum value of the slider:

max: 500,

Implies that cv will never be greater than 500. 500 divided by 5 is 100. 200 minus 100 is 100, ergo the maximum zoom by this math is 100%.

Keeping the image centered will either involve some CSS magic (harder to work out, cleaner) or by animating the image's position as well (easy peasy).

Answer 2

https://github.com/timmywil/jquery.panzoom here is working demos https://timmywil.github.io/jquery.panzoom/demo/

<section id="panzoom-section">
      <div class="parent">
        <div class="panzoom">
          <img src="image-src" width="900" height="900">
        </div>
      </div>
      <div class="buttons">
        <input type="range" class="zoom-range">
      </div>
      <script>
        (function() {
          var $section = $('#panzoom-section');
          $section.find('.panzoom').panzoom({
            $zoomRange: $section.find(".zoom-range"),
          });
        })();
      </script>
</section>