JQuery Fancybox - 多個內聯實例

Question

我想調用多個內聯項目，當我點擊它們時，它只顯示第一個內容！我拉我的頭髮，請幫助。

我的JavaScript呼叫：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.fancybox').fancybox(); 
    }); 
</script> 

我的HTML：

<div class="atrack"> 
       <img src="images/albumcovers/Italian-Japanese-lg.jpg" class="trackcover" width="66" height="66" /> 
       <p class="artist">Italian Japanese</p> 
       <p class="trackname">Two Islands</p> 
       <img src="images/buynow-artinfo.jpg" border="0" usemap="#Map" class="actionbtns" /> 
       <map name="Map" id="Map"> 
        <area shape="rect" coords="1,-2,87,26" href="#" /> 
        <area shape="rect" coords="-2,27,83,57" class="fancybox" href="#track1" /> 
       </map> 
      </div> 

      <div class="atrack"> 
       <img src="images/albumcovers/Yann-Tiersen-lg.jpg" class="trackcover" width="66" height="66" /> 
       <p class="artist">Yann Tierson</p> 
       <p class="trackname">The Trial</p> 
       <img src="images/buynow-artinfo.jpg" border="0" usemap="#Map" class="actionbtns" /> 
       <map name="Map" id="Map"> 
        <area shape="rect" coords="1,-2,87,26" href="#" /> 
        <area shape="rect" coords="-2,27,83,57" class="fancybox" href="#track2" /> 
       </map> 
      </div> 








<div class="gcr-artistinfo" id="track1" style="width: 580px; overflow: hidden; display: none;"> 
    <h2>Italian Japanese</h2> 
    <img class="largealbum" src="images/albumcovers/Italian-Japanese-lg.jpg" /> 
    <p><span>Song:</span> Two Islands</p> 
    <p><span>Album:</span> (Single)</p> 
    <p><span>From:</span> Southern California</p> 
    <img src="images/artist-info-opts.jpg" border="0" usemap="#Map2" class="artistoptions" /> 
    <map name="Map2" id="Map2"> 
     <area shape="rect" coords="-11,2,156,26" href="http://itunes.apple.com/us/album/nyc-single/id515976173?ign-mpt=uo%3D4http://" target="_blank" /> 
     <area shape="rect" coords="-13,26,153,46" href="http://www.italianjapanese.com/" target="_blank" /> 
     <area shape="rect" coords="-4,47,156,77" href="#" target="_blank" /> 
    </map> 
</div> 

<div class="gcr-artistinfo" id="track2" style="width: 580px; overflow: hidden; display: none;"> 
    <h2>Yann Tiersen</h2> 
    <img class="largealbum" src="images/albumcovers/Yann-Tiersen-lg.jpg" /> 
    <p><span>Song:</span> The Trial</p> 
    <p><span>Album:</span> Skyline</p> 
    <p><span>From:</span> France</p> 
    <img src="images/artist-info-opts.jpg" border="0" usemap="#Map2" class="artistoptions" /> 
    <map name="Map2" id="Map2"> 
     <area shape="rect" coords="-11,2,156,26" href="http://yanntiersen.sandbag.uk.com/Store/DisplayItems.html" target="_blank" /> 
     <area shape="rect" coords="-13,26,153,46" href="http://www.yanntiersen.com/" target="_blank" /> 
     <area shape="rect" coords="-4,47,156,77" href="#" target="_blank" /> 
    </map> 
</div> 

感謝您的幫助/建議！我很感激:)

• 博

Answer 1

的問題是，你不能使用相同的ID和name兩個不同area maps。這兩個鏈接都連接到相同的map和area，所以它將始終使用一個。

嘗試二審的地圖分配不同ID和name所以

<img src="images/buynow-artinfo.jpg" border="0" usemap="#Map01" class="actionbtns" /> 
<map name="Map01" id="Map01"> 
<area shape="rect" coords="-2,27,83,57" class="fancybox" href="#track1" /> 

和

<img src="images/buynow-artinfo.jpg" border="0" usemap="#Map02" class="actionbtns" /> 
<map name="Map02" id="Map02"> 
<area shape="rect" coords="-2,27,83,57" class="fancybox" href="#track2" /> 

它更像一個HTML的語義問題比的fancybox問題