Okay, so like any programming task you want to break something like this down into simple steps. In this case, maybe something like this:
- 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 calledhide
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... - Every five seconds, fade the current image out, and fade the next one in.
- 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/