Как повторно инициализировать обертку размера jQuery?

Question

Пытается изменить размер и перетаскивание изображения с помощью пользовательского интерфейса jQuery. Имея проблему с этим,

Ниже автоматически добавляется jQuery IU. Но это не меняет свой первоначальный размер, если я загружаю другое изображение. Значит, он будет сохранять исходные изображения в ширину и высоту, даже если я загружаю другое изображение динамически.

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

Это мой 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> 

И это мой Javascript

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

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

}); 

закачать свои файлы через PHP скрипт, который сохраняет изображение на сервере и передать JSON с данными изображения в функцию JS, которая загружает изображение,

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

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

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

Любые идеи, как исправить это?

Answer 1

Обнаружено решение проблемы. Каждый раз, когда загружаю новую фотографию, я делаю следующее. This is initialize the resize object:

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