Question

I have been writing my own Lightbox script (to learn more about jQuery).

My code for the captions are as follows (the problem is that the captions are the same on every image):

close.click(function(c) {
    c.preventDefault();
    if (hideScrollbars == "1") {
        $('body').css({'overflow' : 'auto'}); 
    }
    overlay.add(container).fadeOut('normal');
    $('#caption').animate({ 
        opacity: 0.0
        }, "5000", function() {
            $('div').remove('#caption'); 
        });
    });

  $(prev.add(next)).click(function(c) {
    c.preventDefault();
    $('div').remove('#caption') 
    areThereAlts = "";
    var current = parseInt(links.filter('.selected').attr('lb-position'),10);
    var to = $(this).is('.prev') ? links.eq(current - 1) : links.eq(current + 1);
    if(!to.size()) {
      to = $(this).is('.prev') ? links.eq(links.size() - 1) : links.eq(0);
    }
    if(to.size()) {
      to.click();
    }
  });

Answer 1

So, I found out what was wrong (Cheers Deng!), further down the code I had the following function (I had to add “link” into the remove caption code):

links.each(function(index) {
    var link = $(this);
    link.click(function(c) {
      c.preventDefault();
      if (hideScrollbars == "1") {
        $('body').css({'overflow' : 'hidden'});
      }
      open(link.attr('href'));
      links.filter('.selected').removeClass('selected');
      link.addClass('selected');
      var areThereAlts = $(".thumb", link).attr("alt"); //"link" needed to be added here
        //alert(areThereAlts);
        if (areThereAlts !== "") {
            container.append('<div id="caption" style="display: block; font-family: Verdana; background-color: white; padding: 4px 5px 10px 5px; top -10px; width: 100%; height: 25px; vertical-align: middle; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; color: #3f3f3f;"><font color="#3f3f3f">'+areThereAlts+'</font></div>') //caption
        }
    });
    link.attr({'lb-position': index});
  });