SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question get array key, and move pointer

    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:

    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. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Might this do what you want

    Code JavaScript:
    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. #3
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •