Thumbnail Captions Single and Double Click?

Question

Hello all,

I know nearly nothing about this all so I turn to you for some desperately needed help. If you need to see any more code or info just ask and i'll answer asap.

the following code snippet is what im using for a photo gallery on:

http://luisposada.co.uk/home/photography-2/

The problem is the following the caption below the main picture appears on one click when you go through the thumbnails from left to right but on a double click only going from right to left. Obviously i want the captions to change no matter what order the thumbnails are clicked in and on a single click.

Thank you very much.

<script type="text/javascript"> 

$(function() {
   $('#feature').cycle({
       speed:       1000,
       timeout:     <?php echo $speed; ?>
   });

$("#yc_thumbnail_frame a").live("click",function(){
    $(".yc_img_fullsize").each(function(index) {
        if ($(this).is(":visible")) {
            var text = $(this).attr("alt");
            $(".caption").html(text);
        }
    });
  });
});

$(window).load(function() {
   $("img.yc_img_fullsize").each(function(index) {
    if ($(this).is(":visible")) {
        var text = $(this).attr("alt");
        $(this).parent().after("<p class='caption'>" + text + "</p>");
    }
  });

});

</script> 

Answer 1

The following change to the #yc_thumbnail_frame a click event handler should fix it up for you:

$("#yc_thumbnail_frame a").live("click",function(){

    // Instead of looking for the visible image, find the one that matches the thumbnail src
    var thumbSrc = $(this).find('img').attr('src');
    $(".yc_img_fullsize").each(function(index) {
        if ($(this).attr('src') == thumbSrc) {
            var text = $(this).attr("alt");
            $(".caption").html(text);
        }
    });
  });
});

The reason it's not currently working as you'd expect is because when you click one of the thumbnail links, it cycles through all the large images and figures out which one is visible. When it finds the visible one, it then sets the caption text from its alt text.

It seems that setting the large image visible is slightly slower than trying to determine its caption text.