Question

Simple concept, but I’m having trouble coming up with an elegant solution.

I’ve got a series of images in a gallery and the amount inside will change. I’ve written a short script that runs through a slideshow, fading the visible image out with the next underneath it. Conceptually it’s perfect, but above 2 images it gets wonky because the “next” images are all on the same z-index.

Is there a simple script that can count the photos and add a progressive z-index to them? For example: there are 10 images in the gallery and it assigns them z-indexes -1 through -10.

Thanks for your help!

jsFiddle: http://jsfiddle.net/danielredwood/mmPZN/

HTML:

<img class="slide first" src="img/diamond-test.jpg" />
<img class="slide" src="img/diamond-test2.jpg" />
<img class="slide" src="img/diamond-test3.jpg" />

CSS:

.slide {
  top:100px;
  position:absolute;
  z-index:-1;
}
.first {
  display:block;
  position:static;
}

JavaScript:

$('.slide').click(function(){
    var pic = $(this);
    pic.fadeOut(400, function(){
        pic.next().addClass('first');
        pic.insertAfter('.slide:last').removeClass('first').show();
    });    
});

Answer 1

Figured out a solid fix, didn’t need to z-index all the images sequentially.

See here: http://jsfiddle.net/danielredwood/mmPZN/1/

JavaScript:

$('.slide:first').addClass('first').next().addClass('second');
$('.slide').click(function(){
    var pic = $(this);
    pic.fadeOut(400, function(){
    pic.next().removeClass('second').addClass('first').next().addClass('second');
        pic.insertAfter('.slide:last').removeClass('first').show();
    });    
});