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:380px;
    height:204px;
    position:relative;
    overflow:hidden;
    border-radius: 150px;
    border: 1px solid #D9D9D9;
}

#box{
    background:black;
    cursor: move;
    margin-left: 60px;
    margin-top: 45px;
    border-bottom: 1px solid white;
}


#hidden-img{
    display:none;
}

#zoom{
    margin-left: 30px;
}

JavaScript

$(document).ready(function() {

var previousValueL = 60;
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);

         $("#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 < 60) l = $img.offset().left + (previousValueL - sliderValue);
             $img.offset({
                 left: l
             });
         }
         previousValueL = sliderValue;
         
        if (sliderValue < previousValueT) {
             var t;
             t = $img.position().left;
             if (t < 45) t = $img.offset().top + (previousValueT - sliderValue);
             $img.offset({
                 top: t
             });
         }
         previousValueT = sliderValue;
         
         if (t > 45) {
             $img.css("top", "0px");
         }
         
         if (l > 60) {
             $img.css("left", "0px");
         }
        
         if (widthVerschil < 385){
             $img.draggable({
             containment: [60, -totalHeight, 60, 45],
             scroll: false,
             iframeFix: true
         });
         } else {
         $img.draggable({
             containment:...