Hi, 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:

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'
);

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:

<ul id="gallery">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<ul id="gallery-controls">
    <li id="gallery-prev"><a href="#">Previous</a></li>
    <li id="gallery-next"><a href="#">Next</a></li>
</ul>

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:

$('#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?!?!
    });
});

Thanks for help!