流水遊戲與多個覆蓋和圖像按鈕

Question

嗨我遇到了問題flowplayer overlays。我有多個圖像按鈕。疊加層「彈出」，但流水遊戲不加載。請如果你能在我的代碼中發現錯誤，我將非常感激。

<script> 

$(function() { 

// setup overlay actions to buttons 
$("button[rel]").overlay({ 

    // use the Apple effect for overlay 
    effect: 'apple',   

    expose: '#789',    

    onLoad: function(content) { 
     // find the player contained inside this overlay and load it 
     this.getOverlay().find("a.player").flowplayer(0).load(); 
    }, 

    onClose: function(content) { 
     $f().unload(); 
    } 
});    

// install flowplayers 
$("a.player").flowplayer("http://www.bazookatag.com/flowplayer-3.2.7.swf"); 
}); 
</script> 

<p> 
<div> 
<div style="float:left; width: 400px; height: 325px; padding-left: 20px;"> 
     <button rel="#overlay1"><img src="images/playersplash.png" width="355" height="301" /> 
     </button> 
</div> 

    <div style="float:left; width: 500px; height: 325px;"><h2>Stars</h2></div> 
    </div> 

<div> 
    <div style="float:left; width: 500px; height: 325px; padding-left: 25px;"> <h2>Domed</h2></div> 
    <div style="float:right; width: 400px; height: 325px;"> 
     <button rel="#overlay2"><img src="images/playersplash.png" width="355" height="301" /></button> 
    </div> 
    </div> 

    <div> 
    <div style="float:left; width: 400px; height: 325px; padding-left: 20px;"> 
    <button rel="#overlay3"><img src="images/playersplash.png" width="355" height="301" /></button> 
</div> 
    <div style="float:left; width: 500px; height: 325px;"><h2>Viral 4</h2></div> 
    </div> 

<div> 
    <div style="float:left; width: 500px; height: 325px; padding-left: 25px;"><h2>Viral 5</h2></div> 
    <div style="float:right; width: 400px; height: 325px;"> 
     <button rel="#overlay4"><img src="images/playersplash.png" width="355" height="301" /></button> 
    </div> 
    </div> 
</p> 

<!-- overlays for both videos --> 
<div class="overlay" id="overlay1"> 
<a class="player" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"> 
    &nbsp; 
</a> 
</div> 

<div class="overlay" id="overlay2"> 
<a class="player" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"> 
    &nbsp; 
</a>  
</div> 

<div class="overlay" id="overlay3"> 
<a class="player" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"> 
    &nbsp; 
</a> 
</div> 

<div class="overlay" id="overlay4"> 
<a class="player" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"> 
    &nbsp; 
</a>  
</div> 

Answer 1

安裝播放器，覆蓋前：

// install flowplayers 

    $("a.player").flowplayer("http://www.bazookatag.com/flowplayer-3.2.7.swf"); 
    }); 

// setup overlay actions to buttons 

    $("button[rel]").overlay({ 

    // use the Apple effect for overlay 
    effect: 'apple',   

    expose: '#789',    

    onLoad: function(content) { 
     // find the player contained inside this overlay and load it 
     this.getOverlay().find("a.player").flowplayer(0).load(); 
    }, 

    onClose: function(content) { 
     $f().unload(); 
    } 
});