Question

I have two global arrays, but when called outside of the script – it parses all strings instead of 0 to the first call, 1 to the second call, 2 to the third call etc.

The jQuery:

    $(document).ready(function() {
$('map > area.fancybox').click(function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    var title = $(this).attr('title');
    var type = $(this).attr('rel');
    $.fancybox({
        'title': title,
        'titlePosition': 'inside',
        'href' : url,
        'type' : type,
          closeBtn    : true,
    maxWidth  : 467,
    maxHeight  : 609,
    fitToView  : false,
    padding   : '5',
    openEffect  : 'none',
    closeEffect  : 'none'
    });
  $('.fancybox').attr('title', altTitle);
});

  window.slideTitles = [   "Title 0",
                        "Title 1",
                        "Title 2"
                     ]; 

  window.altTitle =  [    "This is ALT tag 0",
                       "This is ALT tag 1",
                       "This is ALT tag 2"
                     ]; 
});

The HTML:

<img src="test.jpg" width="800" height="480" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="59,132,227,367" href="test1.htm" class="fancybox" rel="iframe" onClick="_gaq.push(['_trackEvent', window.slideTitles, window.altTitle, 'testing action']);" />
  <area shape="rect" coords="304,108,483,382" href="test2.htm" class="fancybox" rel="iframe" onClick="_gaq.push(['_trackEvent', window.slideTitles, window.altTitle, 'testing action']);" />
  <area shape="rect" coords="514,46,747,441" href="test3.htm" class="fancybox" rel="iframe" onClick="_gaq.push(['_trackEvent', window.slideTitles, window.altTitle, 'testing action']);" />
</map>

How can I make it assign them in sequence please?

Answer 1

This:

$('.fancybox').attr('title', altTitle[$(this).index()]);

should be

$(this).attr('title', altTitle[$(this).index()]);

or

this.title = altTitle[$(this).index()];

Though, I don’t exactly understand your question.