title: jQuery add z-index value to a series of images
body: <p>Simple concept, but I'm having trouble coming up with an elegant solution.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Thanks for your help!</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/danielredwood/mmPZN/" rel="nofollow">http://jsfiddle.net/danielredwood/mmPZN/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;img class="slide first" src="img/diamond-test.jpg" /&gt;
  &lt;img class="slide" src="img/diamond-test2.jpg" /&gt;
  &lt;img class="slide" src="img/diamond-test3.jpg" /&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.slide {
    top:100px;
    position:absolute;
    z-index:-1;
  }
  .first {
    display:block;
    position:static;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$('.slide').click(function(){
      var pic = $(this);
      pic.fadeOut(400, function(){
          pic.next().addClass('first');
          pic.insertAfter('.slide:last').removeClass('first').show();
      });    
  });
  </code></pre>