How to get the slideshow effect using javascript on my website?

[Wesley King]

I am trying to get a "slideshow" effect on my website. I have plenty of examples of it, but I cannot for the life of me find a tutorial on programming it.

Examples would include:

http://www.sibfox.com/

http://www.crunchyroll.com/

Both of these sites have a slideshow that has the little markers on the bottom right.

Ideally I want one like www.crunchyroll.com has.

I THINK the coding is as follows (from Sibfox.com):

		<div id="gal">

<div id="pics_list"><div><ul><li><img src="/data/catalog/9_thumb.jpg" width="758" height="342" /></li><li><img src="/data/catalog/10_thumb.jpg" width="758" height="342" /></li><li><img src="/data/catalog/11_thumb.jpg" width="758" height="342" /></li><li><img src="/data/catalog/12_thumb.jpg" width="758" height="342" /></li><li><img src="/data/catalog/13_thumb.jpg" width="758" height="342" /></li></ul></div></div><div id="pics_menu"><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a>

</div>

</div>

While the Javascript coding is as follows:

var galbuts;
var active;
var cur_cycle;
var cycle_timeout;
var pics_list;

function isInt(x) { 
   var y=parseInt(x); 
   if (isNaN(y)) return false; 
   return x==y && x.toString()==y.toString(); 
} 

function findA(aLink) {
	for (var i=0; i<galbuts.length; i++) {
		if (aLink == galbuts[i]) {
			return i;
		}
	}
}

function gotoPic(index) {
	if (active == index) return;
	if (isInt(active)) {
		goWhite(galbuts[active]);
	}
	active = index;
	pics_list.morph({'marginLeft': index*-1*758});
	goRed(galbuts[index]);
}

function toMine() {
	var a_index = findA(this);
	gotoPic(a_index);
	clearTimeout(cycle_timeout);
	cycle_timeout = setTimeout(cycle, 7500);
	cur_cycle = a_index;
	return false;
}

function cycle() {
	if (cur_cycle == galbuts.length-1) {
		cur_cycle = 0;
	} else {
		cur_cycle++;
	}
	gotoPic(cur_cycle);
	cycle_timeout = setTimeout(cycle, 5000);
}

function goRed(el) {
	el.setStyle('backgroundPosition', '0 -16px');
}

function goWhite(el) {
	el.setStyle('backgroundPosition', '0 -0');
}


window.addEvent('domready', function()
{
		$('keyword').addEvents({									 
								   'focus' : function(){  if (this.value=='search...') this.value='' },
									'blur' : function() { if (this.value=='') this.value='search...' }
									
						 	    });

	galbuts = $('pics_menu').getElements('a').reverse();	
	pics_list = $('pics_list').getElement('div');
	pics_list.set('morph', {duration: 750, transition: Fx.Transitions.Quad.easeInOut});	
	goRed(galbuts[0]);
	cur_cycle = 0;
	active = 0;
	cycle_timeout = setTimeout(cycle, 5000);
	for (var i=0; i<galbuts.length; i++) {
		galbuts[i].set('morph', {duration: 350});
		galbuts[i].addEvents({
									 'mouseleave': function(){
															if (findA(this) != active) {
																goWhite(this);
															}
													   },
									 'mouseover' : function(){
										 					if (findA(this) != active) {
																goRed(this);
															}
													   },
									 'click'     : toMine
									 });
	}
	$$(document.links).filter(function(el) {
		return el.rel && el.rel.test(/^lightbox/i);
	}).slimbox({/* Put custom options here */}, null, function(el) {
		return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
	});
}
);

Please let me know how I could customize this (including how to change size of window, how to alter the shape of the tracker in bottom right, and how to add a text box over the picture like Crunchyroll's site has. Preferably, I would like a website with the details but I can't find anything specific on this item at w3.

Thank you in advance,
Wesley

[Paul Johnson]

There is a really good example of how to do this in Chapter 4 of "jQuery Novice to Ninja". The source is available from http://www.sitepoint.com/books/jquery1/code.php - it's really rather simple!