Target items in an array on click?


Bear in mind I'm a javascript/jquery/stackoverflow newbie. I have an array of JQuery objects (each one is an image). Right now I've got a separate function for each item in the array:

var $photos = [];
$photos.push($('img.one'), $('img.two'), $('img.three'), $('img.four'), $('img.five'),              $('img.six'));
$('.thumbnails img.two').click(function(){
    $('div#slide-container').fadeIn('fast');
    setTimeout(function(){
    $('div#slideshow').slideDown('fast');}, 200);
    setTimeout(function(){
    images[1].fadeIn('fast');}, 500);
});

In other words I have the above code for each of the 5 indexes in the array. How can I write this so that I can target whichever photo is clicked using just one function instead of six? So instead of "images[1]" specifically, I can just say "images[i]".

Here's a link to a live version of this:

http://www.noticeeverything.com/photos/

$('.thumbnails img').click(function(){
    var $this = $(this);
    $('div#slide-container').fadeIn('fast');
    setTimeout(function(){
    $('div#slideshow').slideDown('fast');}, 200);
    setTimeout(function(){
    $this.fadeIn('fast');}, 500); });

Also I think you can use callback instead of setTimeout

$('.thumbnails img').click(function(){
    var $this = $(this);
    $('div#slide-container').fadeIn('fast', function(){
        $('div#slideshow').slideDown('fast', function(){
            $this.fadeIn('fast');
        });
    });
});

You can write a general click handler for all the images that uses $(this) to refer to the element clicked on. To make it available in the setTimeout callback, you'll need to set a local variable to it, so it will be saved in the closure.

$(".thumbnails img").click(function() {
    var $this = $(this);
    $('div#slide-container').fadeIn('fast');
    setTimeout(function() {
        $('div#slideshow').slideDown('fast');
    }, 200);
    setTimeout(function() {
        $this.fadeIn('fast');
    }, 500);
});

UPDATE:

There's no need for the array. This version just assumes that the images in the slideshow are in the same position as the TDs containing the corresponding thumbnails, and uses .eq() to find them.

$("#thumbnails img.thumb").click(function () {
    var index = $(this).closest('td').index();
    $('div#slide-container').fadeIn('fast');
    setTimeout(function () {
        $('div#slideshow').slideDown('fast');
    }, 200);
    setTimeout(function () {
        $("div#slideshow img").eq(index).fadeIn('fast');
    }, 500);
});

DEMO

The reason $(this) wasn't being set earlier is because you had .thumbnails, and I copied that, but it should be #thumbnails. So the selector wasn't matching the elements.


You can use jQuery selectors. In this case, you will use the 'ancestor descendant' (http://api.jquery.com/descendant-selector/) - Selects all elements that are descendants of a given ancestor.

This:

// Everything inside `.thumbnails` with tag `img`
$('.thumbnails img')

HTML (example)

<ul class="thumbnails">
  <li><img src="..."></li>
  <li><img src="..."></li> 
  <li><img src="..."></li>
  <li><img src="..."></li>
</ul>

jQuery

(function($){
  $('.thumbnails img').on('click',function(e){
     e.preventDefault();
     // do someting...
  });
})(jQuery);