Hi there,

I'm currently working on a photo gallery in jQuery. At the moment I load an array (images), with the scrs of the images in a certain div. I then push and shift the scrs so that the array changes on each timeout... Actually it's probably easier if I just show you the code:

function revolve(delay){
	var src = images[0];
	var nextSrc = images[1];
	$('#window img[src="' + nextSrc + '"]').css({"z-index": 50});
	$('#window img[src="' + src +'"]').css({"z-index": 100}).fadeOut(1000, function(){
		$(this).css({"z-index": 0}).show();
	$('#thumbs img[src="' + src + '"]').animate({opacity: 0.5}, 1000);
	$('#thumbs img[src="' + nextSrc + '"]').animate({opacity: 1}, 1000);
	timer = setTimeout("revolve(" + delay + ")", delay + 1000);
So I have an endlessly cycling image gallery. The next step is allowing the user to click a thumbnail and have that appear at the top of the stack. The problem is I want the images to remain in sequence.

So I'm looking for a way of iterating through the array, rather than pushing and shifting. Then when a user clicks on a thumbnail, I move the pointer to that array key, and continue from that point, when the animation starts up again.

I think I could probably do this in PHP, but I'm a bit lost with javascript.

Thanks in advance,