jQuery Fancybox-多个内联实例 [英] JQuery Fancybox - Multiple inline instances

问题描述

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

I am trying to call multiple inline items, and when I click them it only shows the first one's content! I am pulling my hair out please help.

我的Java语言调用:

My Javascript Calling:

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

感谢您的帮助/建议！我很感激:)

Thanks for any help / suggestions! I appreciate it :)

• Bo

推荐答案

问题是您不能对两个不同的area maps使用相同的ID和name.这两个链接都连接到相同的map和area，因此它将始终使用单个链接.

The problem is that you cannot use the same ID and name for two different area maps. Both links are attached to the same map and area so it will always use a single one.

尝试为第二个实例的映射分配不同的ID和name，这样

Try assigning a different ID and name for the map of the second instance so

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

It's more like a html semantics issue than a fancybox issue

这篇关于jQuery Fancybox-多个内联实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！