Question

I’m wondering how to improve a thumbnail gallery by making it so one could click the main image to advance to the next image in the list. The main image is in the #image div. Right now you can only click the thumbnail (.image) to select an image. Below is how it is setup right now. Any help would be greatly appreciated.

<ul class="thumb">

<li><a href="images/1.png" class="image"><img src="images/t1.png"border="0"/></a></li>
<li><a href="images/2.png" class="image"><img src="images/t2.png"border="0"/></a></li>

 <div id="container"><div id="image"></div> 
</div>



$(function() {
$(".image").click(function() {
var image = $(this).attr("href");

$('#image').hide();
$('#image').fadeIn();
$('#image').html('<img src="' + image + '">');  

return false;
    });
    (location.attr)? $("a [rel="+location.attr+"]").click():$(".thumb a:first").click();

});

Answer 1

Note that you have malformed html. You are missing the closing ul. Not sure if that’s a typo or not. Anyway, does this do what you want?

$("#image").click(function() {
    var $this = $(this);
    var $thumbs = $(".thumb");
    var currentImage = $this.children("img").attr("src");

    // Find the next image in the list of thumbs
    var $next = $("a[href='" + currentImage + "']", $thumbs).closest("li").next().find("a");

    // If at the end of the list of thumbs, use the first
    if ($next.length < 1)
        $next = $("li:first a", $thumbs);

    var image = $next.attr("href");

    $this.hide();
    $this.fadeIn();
    $this.html('<img src="' + image + '">');
});

Demo