Question

I would like to show 10 elements (images) incrementally. When the 9th image is displayed, I want to display them again (rotating), but this time in reverse.

So, show image 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 …

When 9th is reached … pause, then …

Show image 9, 8, 7, 6, 5, 4, 3, 2, 1

The HTML:

<div class="home-gallery">
<img class="yummy-choco" src="home_chocolate1.jpg" /> 
<img class="yummy-choco" src="home_chocolate2.jpg" /> 
<img class="yummy-choco" src="home_chocolate3.jpg" /> 
<img class="yummy-choco" src="home_chocolate4.jpg" /> 
<img class="yummy-choco" src="home_chocolate5.jpg" /> 
<img class="yummy-choco" src="home_chocolate6.jpg" /> 
<img class="yummy-choco" src="home_chocolate7.jpg" /> 
<img class="yummy-choco" src="home_chocolate8.jpg" /> 
<img class="yummy-choco" src="home_chocolate9.jpg" /> 
<img class="yummy-choco" src="home_chocolate10.jpg" />
</div>

The Javascript / jQuery code I have so far (can’t get the reverse to work!):

// show first image
$('.yummy-choco').hide().eq(0).show();

var pause = 250;
var chocolates = $('.yummy-choco');
var count = chocolates.length;
var i = 0;

setTimeout(transition,pause);

function transition()
{                  
    chocolates.eq(i).fadeIn();

    if (++i >= count)
    {
        i = 0;
    }
    // if on the 10th image, show then pause
    if(i == 9) 
    {
        chocolates.eq(9).fadeIn();
        $(".home-gallery").delay(3000).show(function( ) 
        {
            // here i want to show the images in reverse
            // maybe a for loop?
            chocolates.eq(i-1).fadeOut();
            setTimeout(transition, pause); 
        });
    }
    else 
    {
        chocolates.eq(i-1).fadeOut();
        setTimeout(transition, pause); 
    }
}

You can see a semi-working version of this here: http://www.azature.com/azchocolates/

Any help or ideas much appreciated!

Answer 1

If you keep track of the state (whether you are incrementing or decrementing) you can use that in your transition function.

You pretty much have three cases, either you are incrementing normally, you are decrementing normally, or you need to transition. In the third case, we can just switch from incrementing to decrementing (or vice versa) and then call the transition function again.

var delay = 1000,
    pause = 3000,
    chocolates = $(".yummy-choco"),
    count = chocolates.length,
    id = 0,
    incrementing = true;

chocolates.eq(id).show();

setTimeout(transition, delay);

function transition() {
    var fadeOutId = id,
        totalTimeout = delay;

    if (incrementing && id < count - 1) {
        id++;
    } else if (!incrementing && id > 0) {
        id--;
    } else {
        incrementing = !incrementing;
        return transition();
    }

    chocolates.eq(id).fadeIn();
    chocolates.eq(fadeOutId).fadeOut();

    if(id === 9) {
        totalTimeout += pause;
    }

    setTimeout(transition, totalTimeout);
}

Full example at http://jsfiddle.net/AWcvz/1/