Question

I’m trying to use jQuery to generate my own gallery with a div of clickable thumbnails that show/hide a big image when the corresponding thumbnail is clicked.

I’ve got it working but only with a known number of images (in this case 3) in the gallery. What if I have 30 images in a gallery? I don’t want to have to write out the code below 30 times!

What I really want is to change this code….

$('#slideshow-thumbs img.1').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.1').removeClass('hide');
    $('#main-slideshow img.1').addClass('show');
});

$('#slideshow-thumbs img.2').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.2').removeClass('hide');
    $('#main-slideshow img.2').addClass('show');
});

$('#slideshow-thumbs img.3').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.3').removeClass('hide');
    $('#main-slideshow img.3').addClass('show');
});

…to a format more like this (where n is a number and j is the total number of images in the gallery):

for (n=1; n<=j; n++) {

$('#slideshow-thumbs img.n').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.n').removeClass('hide');
    $('#main-slideshow img.n').addClass('show');
});

}

But I don’t know how to write this properly in jQuery as I’m new to it. Would really appreciate some help! I would also like the script to calculate what j (the total number of images in the gallery) is too (by detecting it from the html I assume), so that the script will work for any gallery of any size.

Thanks in advance for any help.

Related HTML:

<div id="main-slideshow">
    <img class="1 show" src="images/booklet-open.jpg"/>
    <img class="2 hide" src="images/booklets.jpg" />
    <img class="3 hide" src="images/poster-1.jpg" />
</div>

<div id="slideshow-thumbs">
    <img class="1 active" src="images/booklet-open-thumb.jpg" />
    <img class="2 inactive" src="images/booklets-thumb.jpg" />
    <img class="3 inactive" src="images/poster-1-thumb.jpg" />
</div>

Related CSS:

.inactive {
    opacity:0.5;
}

.active {
    opacity: 1;
}

.hide {
    display:none;
}

.show {
    display:block;
}

Answer 1

You don’t need so many classes and for loop. Look at this demo http://jsfiddle.net/eaTjM/1/

$("#slideshow-thumbs img").click(function(){
  $(this).addClass("active").siblings().removeClass("active");
  $("#main-slideshow img").eq($(this).prevAll().length)
    .addClass("show").siblings().removeClass("show")
});

$(this).prevAll().length gives us clicked preview index and .eq() method gives image by this index.