How to tell it to stop rotating images at the end?

[jessnoonyes]

Hi all! I'm using a little javascript script I came across for a simple slideshow and it works great. However I want it to stop rotating images when it comes to the end of the slideshow and just stay on the last image. Is there a simple way to edit this to tell it to do that?

var delay = 3000;
var start_frame = 0;

function init() {
	var lis = $('slide-images').getElementsByTagName('li');
	
	for( i=0; i < lis.length; i++){
		if(i!=0){
			lis[i].style.display = 'none';
		}
	}
	end_frame = lis.length -1;
	
	start_slideshow(start_frame, end_frame, delay, lis);
	
	
}



function start_slideshow(start_frame, end_frame, delay, lis) {
	setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
}


function fadeInOut(frame, start_frame, end_frame, delay, lis) {
	return (function() {
		lis = $('slide-images').getElementsByTagName('li');
		Effect.Fade(lis[frame]);
		if (frame == end_frame) { frame = start_frame; } else { frame++; }
		lisAppear = lis[frame];
		setTimeout("Effect.Appear(lisAppear);", 0);
		setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850);
	})
	
}


Event.observe(window, 'load', init, false);

Thanks for any help!

[TinyScript]

this might work

if (frame == end_frame) { frame = end_frame; } else if (frame != end_frame){ frame++; }

can you post the entire script?

[jessnoonyes]

That is the entire script. It resides in a file called simple-slideshow.js. Then it acts on an unordered list in the html that looks like this:

<ul id="slide-images">
	<li><img src="i/home_slide_main.jpg" alt="" title="" /></li>
	<li><img src="i/home_slide_1.jpg" alt="" title="" /></li>
	<li><img src="i/home_slide_2.jpg" alt="" title="" /></li>
	<li><img src="i/home_slide_3.jpg" alt="" title="" /></li>
	<li><img src="i/home_slide_main.jpg" alt="" title="" /></li>
</ul>

[TinyScript]

The script obviously uses a library

[jessnoonyes]

prototype and scriptaculous, you're right. You don't want me to post those entire files do you?

[Philip M]

The trouble with tinysscript's solution is that the timeOut keeps on running.
Try this:-

function fadeInOut(frame, start_frame, end_frame, delay, lis) {
	return (function() {
		lis = $('slide-images').getElementsByTagName('li');
		Effect.Fade(lis[frame]);
		if (frame == end_frame) [COLOR="Blue"]{ stopIt() }[/COLOR] 
else { frame++;
		lisAppear = lis[frame];
		[COLOR="Blue"]tim1 = [/COLOR]setTimeout("Effect.Appear(lisAppear);", 0);
		[COLOR="Blue"]tim2 = [/COLOR]setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850);
}
	})
	
}

[COLOR="Blue"]function stopIt() {
window clearTimeout(tim1);
window.clearTimeout(tim2);
}[/COLOR]

Or if you prefer:-

if (frame == end_frame) {window clearTimeout(tim1);window.clearTimeout(tim2) }

[jessnoonyes]

Thanks! Actually this worked just fine:

if (frame == end_frame) { return; } else { Effect.Fade(lis[frame]); frame++; }

Now I'm trying to figure out how to tell it to speed up the display of the first image so it rotates through faster than the rest of the pictures...