jQuery gallery turn over with next and previous buttons
- by Ralf
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!
