jQuery image resize out - width doesn't fit

Question

I am trying to make a banner where you can resize and drag the image. Everything is working fine except for resizing out.

When you resize the image with the slider under the image. The image will grow. After the resize of the image you can successfully drag it to your right and bottom. When you drag the image to the right, and you decided to make your image smaller again. You can use the slider under the image. But now comes the problem. If you are at the right of the image, and you want to resize the image again, the image will not fit with the div. You will see the black background.

Here is the example: http://jsfiddle.net/DennisBetman/tnaGA/

HTML:

<div id="box">
    <img src="http://www.digindigin.com/blog/wp-content/uploads/2012/05/Diablo_3___Wizard_Wallpaper_by_Lythus.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>

jQuery:

jQuery("#zoom").slider({
      max: 650,
      slide: function(){

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

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

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

        var stageWidth = $("#box").width();

        var height = $("#img").height();
        var totalHeight = height - '207';

        $("#img").draggable({
            containment: [-totalWidth, -totalHeight, 0, 0],
            scroll: false,
            iframeFix: true,
        }); 
        $('.text').html('<br/>The file size = ' + height + ' x ' + widthVerschil);
      }


});

var height = $("#img").height();
var totalHeight = height - '207';

$("#img").draggable
({
    containment: [0, -totalHeight, 0, 0],
    snap: false,
    drag: function(event, ui)
    {
        $("#val-x").val(ui.position.left);
        $("#val-y").val(ui.position.top);

    }   

});

$("#img").offset({left: $(this).attr('position')});

CSS:

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

#box{
    background:black;
}


#img{
}

I hope that somebody can help me.

Greetings, Dennis.

Answer 1

I added some code in your fiddle, and I think it seems to be working now...
Fiddle: http://jsfiddle.net/tnaGA/28/

before slider-initialization:

 var previousValue = 0;

within the event-handler function for the slide-event:

     if (sliderValue < previousValue){
          var t, l;
          t = $('#img').position().top;
          l = $('#img').position().left;
          if(t < 0)
              t = t + (previousValue - sliderValue);
          if(l<0)
              l = l +(previousValue - sliderValue);
          $('#img').offset({top: t, left: l});
      }

For debugging you could use the change event of slider. Because the x and y values don't update now when the image is resized.

I hope this can at least inspire you! ;)