title: jQuery gallery turn over with next and previous buttons
body: <p>i'm trying to do some kind of Gallery-Turn Over Script with jQuery. Therefor i got an array with - let's say 13 - images:</p>
  
  <pre><code>galleryImages = new Array(
  'images/tb_01.jpg',
  'images/tb_02.jpg',
  'images/tb_03.jpg',
  'images/tb_04.jpg',
  'images/tb_05.jpg',
  'images/tb_06.jpg',
  'images/tb_07.jpg',
  'images/tb_08.jpg',
  'images/tb_09.jpg',
  'images/tb_10.jpg',
  'images/tb_11.jpg',
  'images/tb_12.jpg',
  'images/tb_13.jpg'
  );
  </code></pre>
  
  <p>My gallery looks like a grid showing only 9 images at once. My current script already counts the number of li-elements in #gallery, loads the first 9 images and displays them. The HTML looks like this:</p>
  
  <pre><code>&lt;ul id="gallery"&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id="gallery-controls"&gt;
      &lt;li id="gallery-prev"&gt;&lt;a href="#"&gt;Previous&lt;/a&gt;&lt;/li&gt;
      &lt;li id="gallery-next"&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I'm pretty new to jQuery an my problem is that i can't figure out how to split the array in portions with 9 elements to attach it as a link on the control buttons. I need something like this:</p>
  
  <pre><code>$('#gallery-next').click(function(){
      $('ul#gallery li').children().remove();
      $('ul#gallery li').each(function(index,el){
          var img = new Image();
          $(img).load(function () {
              $(this).css('display','none');
              $(el).append(this);
              $(this).fadeIn();
          }).attr('src', galleryImages[index]); //index for the next 9 images?!?!
      });
  });
  </code></pre>
  
  <p>Thanks for help!</p>