Question

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.

My Javascript Calling:

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

Thanks for any help / suggestions! I appreciate it 🙂

• Bo

Answer 1

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.

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

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

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