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

JQuery Fancybox - 多个内联实例

1 个答案: