jquery single image gallery
<p>hello everyone I'm trying to make a script that increases an image based on a timeInterval. in fact I want it to browse through several images. So basically it enlarges image 1 for 5 seconds and than scales it back to normal size after five seconds it moves on to image 2 and enlarges that for 5 seconds as well. What I've written so far is pretty basic and I'm having trouble with moving through the images and the timeInterval's.</p>

<pre><code>$("document").ready(function(){
var image_id = 0;
var get_image = document.getElementById(image_id);
var image = $(get_image);

function increase_image()
{
image.animate({height:"+=50", width:"+=50"}, "fast");
}

function reduce_image()
{
image.animate({height:"-=50", width:"-=50"}, "fast");
image_id++;
//alert(image_id);
}

function active()
{

}
//this function is where I placed my time intervals first I want to image increase                                                
//time out to be properly viewed and then scaled back down
function image_run()
{
window.setInterval(increase_image, 5000);
setTimeout(active, 10000);
window.setInterval(reduce_image, 11000);
}
$("span").text(image_id);

image_run();
});
</code></pre>

<p>I gave my HTML tags a numeric value like <code>id=0</code> my hope was that by incremental <code>image_id</code> it would pick up the next image in line, Unfortunately it does not. The time intervals are behaving strangely too it runs the <code>increase_image()</code> function twice before running <code>reduce_image()</code> once (this is probably due to my use of the time interval since this is the first time I'm utilizing them) I've tried to fix my issue with a queue but ultimately that wasn't what I needed. I know for sure that the <code>image_id</code> gets upped by the code but it doesn't move on. I've kept the <code>active()</code> function empty because I am not entirely sure what I want to do with this. I just needed a filler for the <code>timeout</code>. So could anyone push/point me in the right direction I'd appreciate that a lot.</p>

<p>EDIT: okay so I fixed the problem is the "queue" part; I changed my code to </p>

<pre><code>function image_run()
{
var number= 0;
while(number &lt; 100000)
{
image.delay(10000).animate({height:"+=50", width:"+=50"},       "fast").delay(6000).animate({height:"-=50", width:"-=50"}, "fast").delay(6000);
number++;;
}
}
</code></pre>

<p>now how do I make it rotate through all the images?</p>
