以編程方式重複jQuery工具覆蓋

我有另一個關於jQuery工具的新手問題（http://flowplayer.org/tools/overlay/index.html）。點擊圖片時，我會觸發一個覆蓋圖，代碼在html正文中看起來相當像這樣。以編程方式重複jQuery工具覆蓋

<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>

我想每次單擊圖像時都會出現覆蓋圖。現在，每次點擊圖像時，「圖像點擊」會打印到控制檯，但疊加僅在第一次時發生。我怎樣才能改變這個代碼，使覆蓋每次都發生？

感謝您的幫助！

來源

2011-08-05 Tuck

從wich插件是overlay（）函數？ – Einacio

抱歉沒有發佈這個，這裏是鏈接http://flowplayer.org/tools/demos/overlay/trigger.html – Tuck

我認爲，在onBeforeLoad它應該是$（this），因爲通常這裏面的jQuery事件是一個DOM元素，但我現在沒有時間測試您的代碼。如果是這樣，它會打破你的js – Einacio

我還沒有測試過你的具體代碼，但我解決了能夠通過每次調用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>

來源

2012-12-14 00:45:05

以編程方式重複jQuery工具覆蓋

回答

相關問題