Click through image stack by changing order of image containers

I try to make an image stack gallery: As soon as you click the top image it moves to the bottom of the image stack and every other image moves up one position.

I tried several things with no luck so far:

• by swapping the HTML of an article with replaceWith()
• by changing the IDs of the articles with attr(), reOrder() and append()

If something's unclear, please ask. Any help is much appreciated!

Here's my code so far...

HTML:

<div id="content">
  <article id="c1"><img src="01.jpg" alt="" /></article>
  <article id="c2"><img src="02.jpg" alt="" /></article>
  <article id="c3"><img src="03.jpg" alt="" /></article>
  <article id="c4"><img src="04.jpg" alt="" /></article>
  <article id="c5"><img src="05.jpg" alt="" /></article>
  <article id="c6"><img src="06.jpg" alt="" /></article>
  <article id="c7"><img src="07.jpg" alt="" /></article>
  <article id="c8"><img src="08.jpg" alt="" /></article>
  <article id="c9"><img src="09.jp开发者_如何学运维g" alt="" /></article>
  <article id="c10"><img src="10.jpg" alt="" /></article>
</div>

CSS:

div#content {
  position: relative;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
}

article {
  position: absolute;
  width: 400px;
  height: 400px;
  overflow: hidden;
}

article#c1 {top: 0; left: 0; z-index: 1000;}
article#c2 {top: 20px; left: 20px; z-index: 999;}
article#c3 {top: 40px; left: 40px; z-index: 998;}
article#c4 {top: 60px; left: 60px; z-index: 997;}
article#c5 {top: 80px; left: 80px; z-index: 996;}
article#c6 {top: 100px; left: 100px; z-index: 995;}
article#c7 {top: 120px; left: 120px; z-index: 994;}
article#c8 {top: 140px; left: 140px; z-index: 993;}
article#c9 {top: 160px; left: 160px; z-index: 992;}
article#c10 {top: 180px; left: 180px; z-index: 991;}

JS (tryouts):

$(function() {

  $('article#c1').click(function() {
    $(this).replaceWith($('article#c2'));
  });


  $('article#c1').click(function() {
    $('article#c1').attr('id','c2');
    $('article#c2').attr('id','c1');
  });


  $('article#c1').click(function() {
    var order = $('#order').val() == ""? null: $('#order').val().split(",");
    $('#content').reOrder(order, 'c');
    $('#content').reOrder();
  });

});

(function($) {

$.fn.reOrder = function(array, prefix) {
  return this.each(function() {
    prefix = prefix || "";

    if (array) {    
      for(var i=0; i < array.length; i++) 
        array[i] = $('#' + prefix + array[i]);

      $(this).empty();  

      for(var i=0; i < array.length; i++)
        $(this).append(array[i]);      
    }
  });    
}
})(jQuery);

---

This should work:

$(function() {

    $('article#c1').live('click', function() {
        var articles = $('article');
        articles.each(function(i, el) {
            el.id = 'c' + (el.id.substring(1) - 1);
        });
        this.id = 'c' + articles.length;
    });

});

You can see it in action at jsfiddle.net/marke/Adc3K/. Note that I replaced the images with numbers for testing purposes.