Get array key, and move pointer

JavaScript
1

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);
	images.shift();
	images.push(src);
	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,
Mike

2

Might this do what you want

function revolve(delay, i){
	var src = images[i++];
        if (i > images.length) i=0;
	var nextSrc = images[i];
	$('#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 + ", " + i + ")", delay + 1000);
}

Adds another argument to the revolve function. This is an index into array of images.

3

Man, thanks, that’s great.

Now I can pass the function the array index when I start up the animation again, and we move on from where we left off.

Muchos Gracias!