자바 스크립트 두 번째 이미지로드시 오버레이가 작동하지 않습니다.

Question

오버레이를 사용하여 이미지의 전체 미리보기를 표시하는 자바 스크립트가 있으며 확대/축소 버튼과 뒤로 이동 버튼이 있습니다.

문제는 전체 이미지를 처음 보았을 때 확대/축소 토글이 잘 작동하지만 축소판으로 돌아가서 다른 이미지를 실행하면 확대/축소가 작동하지 않습니다.

DOM 트리 구조는 다음과 같다 :
overlay(**parent**) >> imgContainer >> imgCanvas(draggable) >> img

는 일부 코드가 내 경우 도움이 될 수 있음. 아무도 내가 여기서 잘못하고있는 것을 말해 줄 수 있습니까?

//enables the zoom-in/zoom-out toggle function 
     $('#Zoom').toggle(function() { 
       img.removeAttribute("height"); 
       $("#draggable").draggable();     
       iconZ.setAttribute("src", "nav/nav-zoom-out.gif"); 
      },    
      function() { 
       img.setAttribute("height", "270px"); 
       $("#draggable").draggable('destroy'); 
       $("#draggable").animate(
       { "left": $("#draggable").data("Left"), "top": $("#draggable").data("Top")}, "slow"); 
       iconZ.setAttribute("src", "nav/nav-zoom.gif"); 
       }); 

     //navigates back to the thumbnails 
     home.addEventListener('click', function() { 


      $('imgCanvas').remove(); 
      imgContainer.removeChild(imgCanvas); 
      overlay.removeChild(imgContainer); 

      $('#overlay').removeClass("on"); 
      } 
      , false); 

Answer 1

이미지를 넣고있는 페이지의 섹션과 비슷한 모양을 파괴하고 있습니다. 나는 그 (것)들을 단지 숨길뿐입니다.