How do I re-initialize jQuery resize wrapper?

Question

Trying to do a image resize and dragging using jQuery UI. Having a issue with this,

Below is a added automatically by jQuery IU. But this doesn't change its original size if I load a different image. Means it will keep the original images width and hight even though I load a different image dynamically.

<div style="overflow: hidden; position: absolute; width: 493px; height: 370px; top: 0px; left: 0px; margin: 0px;" class="ui-wrapper">

This is my HTML

<div id="photo-area">
<div id="photo-canvas">
    <div class="design-mask">&nbsp;</div>
    <div class="photo-wrap">
        <div class="photo-resize">
              <img id="photo-mask" class="pp-photo" />  
        </div>
    </div>
</div>

And this is my Javascript

$j(".photo-wrap").draggable({
    containment: "#photo-canvas",
    opacity: 0.35,
});

$j(".pp-photo").resizable({
    aspectRatio: true,
    ghost: true,

});

I Upload my files through a PHP Script that saves the image on the server and pass a JSON with image data to a JS function that loads the image,

$j.each(data.result.files, function (index, file) {
    $j('#photo-mask').load( function(){  

          //JQUERY DRAGGABLE CODE
          .....
          .....
         //JQUERY RESIZABLE CODE
         .....
         .....

     }).attr("src",file.url);
}); 

Any ideas how to fix this?

Answer 1

Found a solution for the issue, Every time I load a new photo I do the following. This initialise the resize object:

$j('.dl-photo').resizable("destroy");