Question

I’m trying to create a simple, custom, gallery. I have two lists, one with images, and one with thumbnails of images. (Like so: http://cl.ly/3R1a3X0f0H1S1a300j3c)

Here is the list for the application screen shots:

  <ul class="app-screens">  
    <li><img src="img/app-1.png" alt="Caption" /></li>
    <li><img src="img/app-2.png" alt="Caption" /></li>
    <li><img src="img/app-3.png" alt="Caption" /></li>
    <li><img src="img/app-4.png" alt="Caption" /></li>
  </ul>

And here is the list for the thumbnails:

    <ul class="app-thumbs">
      <li><a href=""/><img src="img/thumb-1.png" alt="" /></a></li>
      <li><a href=""/><img src="img/thumb-2.png" alt="" /></a></li>
      <li><a href=""/><img src="img/thumb-3.png" alt="" /></a></li>
      <li><a href=""/><img src="img/thumb-4.png" alt="" /></a></li>
    </ul>

By default the first thumb is going to be active and have the corresponding screen shown above it. If someone clicks on the third thumb, the third screen should show (and all the rest should be hidden).

So I basically need to give an .active class to a thumb on click, as well as .show() it’s corresponding screen in app-screens. Just not sure how to actually do that? Any help would be greatly appreciated.

Answer 1

$('.apps-thumbs li').click(function(){
    var index = $(this).index();
    $('.app-screens li.selected').each(function(){
        $(this).removeClass('selected');
    });
    $('.app-screens').children()[index].addClass('selected');
});