Img replace

HTML

<div id="box">
    <img src="http://wallpaperway.com/wp-content/gallery/1-wallpaper-001/3d-animals-wallpapers.jpg" id="hidden-img" />
    <img src="http://wallpaperway.com/wp-content/gallery/1-wallpaper-001/3d-animals-wallpapers.jpg" id="img" width="371" height="auto" style="top:-0px; left:-0px;" />
</div>
<!-- style="top:-262px; left:-425px;" -->
<div id="zoom"></div> 
<input type="hidden" id="amount-width" style="border: 0; color: #f6931f; font-weight: bold;" />
<input type="hidden" id="amount-height" style="border: 0; color: #f6931f; font-weight: bold;" />

<div class="text"></div>

<p>
    Position x:
    <input type="text" id="val-x" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<p>
    Position y:
    <input type="text" id="val-y" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

CSS

div {
    width:370px;
    height:204px;
    position:relative;
    overflow:hidden;
    border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

#box{
    background:black;
    cursor: move;
    margin-left: 30px;
    margin-top: 45px;
}


#hidden-img{
    display:none;
}

JavaScript

$(document).ready(function() {
  
var previousValueL = 30;
var previousValueT = 45;
var $img = $('#img');
var height = $img.height();
var totalHeight = height - '250';

 $("#zoom").slider({
     max: 500,
     slide: function (event, ui) {

         var sliderValue = $("#zoom").slider("value");
         $img.width(370 + sliderValue);

         var pos = $img.position(); // returns an object with the attribute top and left
         var top = pos.top; // top offset position
         var left = pos.left; // left offset position

         $("#val-x").val(left);
         $("#val-y").val(top);

         if (left > 0) {
             $img.css("left", '0px');
         }

         if (top > 0) {
             $img.css("top", '0px');
         }

         $("#amount-width").val($img.width());
         $("#amount-height").val($img.height());

         var width = $img.width();
         var widthZoom = width + sliderValue;
         var widthVerschil = widthZoom - sliderValue;
         var totalWidth = widthVerschil - '415';

         height = $img.height();
         totalHeight = height - '250';

         if (sliderValue < previousValueL) {
             var l;
             l = $img.position().left;
             if (l < 30) l = l + (previousValueL - sliderValue);
             $img.offset({
                 left: l
             });
         }
         previousValueL = sliderValue;
         
        if (sliderValue < previousValueT) {
             var t;
             t = $img.position().left;
             if (t < 45) t = t + (previousValueT - sliderValue);
             $img.offset({
                 top: t
             });
         }
         previousValueT = sliderValue;
        
         if (widthVerschil < 376){
             $img.draggable({
             containment: [30, -totalHeight, 30, 45],
             scroll: false,
             iframeFix: true
         });
         } else {
         $img.draggable({
             containment: [-totalWidth, -totalHeight, 30, 45],
         ...