프로그래밍 방식으로 jQuery 도구 오버레이 반복

Question

jQuery 도구에 대한 또 다른 초보자 질문이 있습니다 (http://flowplayer.org/tools/overlay/index.html). 이미지가 클릭 될 때 오버레이가 트리거되고, html 본문에서 이와 비슷한 코드가 표시됩니다.

<img id = "shark" src = "http://static.guim.co.uk/sys-images/Education/Pix/picture 
s/2000/11/13/shark.jpg" alt = "click" /> 

<div id = "overlayFrame"> 
    <div id = "overlayContent"></div> 
</div> 

<script type= "text/javascript"> 
    var clickable = document.getElementById('shark'); 
    clickable.onmousedown = ImageClick; 

    function ImageClick(e) 
    { 
     console.log("image clicked"); 
     $("#overlayFrame").overlay 
     ({ 
      mask: 'darkgrey', 
      oneInstance: false, 

      onBeforeLoad: function() 
      { 
       var wrap = this.getOverlay().find("#overlayContent"); 
       wrap.load("overlay.htm"); 
      }, 

      load: true 
     }); 
    } 
</script> 

이미지를 클릭 할 때마다 오버레이를 표시하고 싶습니다. 현재 'image clicked'는 이미지를 클릭 할 때마다 콘솔에 인쇄하지만 오버레이는 처음에만 발생합니다. 이 코드를 변경하여 매번 오버레이를 만들 수 있습니까?

도움 주셔서 감사합니다.

Answer 1

특정 코드를 테스트하지는 않았지만 매번 overlay(). load()를 호출하여 프로그래밍 방식으로로드를 반복 할 수 있다는 동일한 문제를 해결했습니다. 나는 이것이 당신을 위해 일할 것이라고 생각합니다. 아래 마지막 줄을 참조하십시오.

<script type= "text/javascript"> 
var clickable = document.getElementById('shark'); 
clickable.onmousedown = ImageClick; 

function ImageClick(e) 
{ 
    console.log("image clicked"); 
    $("#overlayFrame").overlay 
    ({ 
     mask: 'darkgrey', 
     oneInstance: false, 

     onBeforeLoad: function() 
     { 
      var wrap = this.getOverlay().find("#overlayContent"); 
      wrap.load("overlay.htm"); 
     }, 

     load: true 
    }).load(); // This is the only code I added 
} 
</script>