JQuery Fancybox - 多个内联实例

我试图调用多个内联项目，当我单击它们时，它只显示第一个项目的内容！我正在拔头发，请帮忙。

我的 JavaScript 调用：

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

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

感谢您的任何帮助/建议！我很感激 ：）

• Bo

问题是你不能使用相同的ID and name对于两个不同的area maps。两个链接都附加到同一个map and area所以它总是使用一个。

尝试分配不同的ID and 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" />

and

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