How can I create an image "change" effect in JQuery?

Question

I have the following structure:

<div class="container">
     <img src="images/1.png" class="image_wall_thumbnail" />
     <img src="images/2.png" class="image_wall_thumbnail" />
     <img src="images/3.png" class="image_wall_thumbnail" />
     <img src="images/4.png" class="image_wall_thumbnail" />
     <img src="images/5.png" class="image_wall_thumbnail" />
     <img src="images/6.png" class="image_wall_thumbnail" />
</div>

What I want to do is use the existing images I am using in the image tags and every 2-5 seconds I want to slowly fade one image and in it's place show another image (one of the existing images in the other image tags) and I want this effect to take place randomly.

I've never done this before so not sure how to go about this? I am thinking fade in and fade out makes sense but not sure how to tackle this. Any ideas?

Answer 1

Okay, so like any programming task you want to break something like this down into simple steps. In this case, maybe something like this:

1. When the page loads, only show the first image. To do this, you should have a display:none CSS rule on all of the images EXCEPT for the first one. This can easily be accomplished by created a class called hide and applying it to the HTML. We could also manage this via JS, but that may cause bugs depending on the internet connection that your users have...
2. Every five seconds, fade the current image out, and fade the next one in.
3. If we are on the last image, make sure we go back to the first image in the list.

That's pretty much all we need to do, so let's write some code:

First, let's refactor your markup to use an id for the container and then add the CSS class to all images but the first.

<div id="img_container">
     <img src="images/1.png" class="image_wall_thumbnail" />
     <img src="images/2.png" class="hide image_wall_thumbnail" />
     <img src="images/3.png" class="hide image_wall_thumbnail" />
     <img src="images/4.png" class="hide image_wall_thumbnail" />
     <img src="images/5.png" class="hide image_wall_thumbnail" />
     <img src="images/6.png" class="hide image_wall_thumbnail" />
</div>

Next, let's write a little CSS:

.hide {
    display:none;
}

Okay now is the "tricky" part where we write some JS:

$(function() {
  //cache dom elements and set init vars
  var $img = $('#img_container').find('img'),
      max = $img.length, //how many images you have in the container
      current = 0; //we will start the script at the first item

  //Every five seconds, run the code within the handler
  setInterval(function(){
    $($img[current]).fadeOut('fast', function(){
      determineIndex(); //Update the index of the image in the img array
      $($img[current]).fadeIn();
    });
  }, 5000);

  function determineIndex () {
    current = (current === max - 1) ? 0 : (current + 1);
  }
});

Now here's the demo! http://jsfiddle.net/T2nzh/

Comment if you have any questions about how the javascript works. :)

EDIT: Okay, so if you want to just randomly swap out image sources, check this out. The html you want:

<div id="img_container">
     <img src="images/1.png" style="background:red" class="image_wall_thumbnail" />
     <img src="images/2.png" style="background:silver" class="image_wall_thumbnail" />
     <img src="images/3.png" style="background:purple" class="image_wall_thumbnail" />
     <img src="images/4.png" style="background:yellow" class="image_wall_thumbnail" />
     <img src="images/5.png" style="background:green" class="image_wall_thumbnail" />
     <img src="images/6.png" style="background:blue" class="image_wall_thumbnail" />
</div>

<div id="img_spares" style="display:none;">
     <img src="images/7.png" style="background:magenta" class="image_wall_thumbnail" />
    <img src="images/8.png" style="background:brown" class="image_wall_thumbnail" />
</div>

And the JS:

$(function() {
  //cache dom elements and set init vars
  var $img = $('#img_container'),
      $spares = $('#img_spares'),
      max = $img.find('img').length,
      spares_max = $spares.find('img').length;

  //Every five seconds, run the code within the handler
  setInterval(function(){
    $($img.find('img')[randomIndex(0,max)]).fadeOut('fast', function(){
      var $el = $(this),
          el_source = $el.attr('style'),
          $swap = $($spares.find('img')[randomIndex(0,spares_max)]),
          swap_source = $swap.attr('style');

      $el.attr('style', swap_source).fadeIn();
      $swap.attr('style', el_source);
    });
  }, 1000);

  function randomIndex (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
});

And the demo: http://jsfiddle.net/T2nzh/3/