1) Script Title: Conveyor Belt slideshow script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rightslide.htm

3) Describe problem: I've changed the script so that the slideshow now runs vertically using http://home.comcast.net/~jscheuer1/s...ee_v_slide.htm, but I'd like to know how I can change it so that it uses buttons (arrows) to scroll through instead of scrolling automatically. Or if there's another script that can do this better. I have two arrow images that I'd like to use to scroll through the script. Any ideas will be appreciated.

This is the code I have so far:

Code:
<script type="text/javascript">
/*
Vertical Pausing Slideshow - freely adapted from:
Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com
Modified by jscheuer1 for continuous content slideshow. Credit MUST stay intact for use
visit http://www.dynamicdrive.com/forums
*/
//Specify the marquee's width (in pixels)
var marqueewidth="150px"
//Specify the marquee's height
var marqueeheight="450px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1
//Specify initial pause before scrolling in milliseconds
var initPause=0
//Specify start with Full(1)or Empty(0) Marquee
var full=1
//Pause marquee onMousever (0=no 1=yes)?
var pauseit=1
//Specify images' border
imgBorder=1
var photos=new Array();
//Specify images, optional link, optional target:
//photos[0]=['files/photo1.jpg', 'http://www.google.com', '_blank']  //Image w/link and target
photos[0]=['Images/thumb1.jpg']
photos[1]=['Images/thumb2.jpg']
photos[2]=['Images/thumb3.jpg']
photos[3]=['Images/thumb4.jpg']
photos[4]=['Images/thumb5.jpg']
photos[5]=['Images/thumb6.jpg']
photos[6]=['Images/thumb7.jpg']
photos[7]=['Images/thumb8.jpg']
photos[8]=['Images/thumb9.jpg']

////NO NEED TO EDIT BELOW THIS LINE////////////
var preload=new Array()
for (var i_tem = 0; i_tem < photos.length; i_tem++)
{
	preload[i_tem]=new Image()
	preload[i_tem].src=photos[i_tem][0]
}

var actualheight=marqueecontent=''
var copyspeed=marqueespeed
var pausespeed=(pauseit)? 0 : copyspeed
var iedom=document.all||document.getElementById
var cross_marquee, cross_marquee2, ns_marquee

for (var i_tem = 0; i_tem < photos.length; i_tem++)
{
	if (typeof photos[i_tem][1]!=='undefined')
	{
		marqueecontent+='<a href="'+photos[i_tem][1]+'"'
		marqueecontent+=typeof photos[i_tem][2]!=='undefined'? ' target="'+photos[i_tem][2]+'"' : ''
		marqueecontent+='>'
	}
	marqueecontent+='<img src="'+photos[i_tem][0]+'" alt="Image #'+[i_tem+1]+'" border="'+imgBorder+'"><br>'
	marqueecontent+=typeof photos[i_tem][1]!=='undefined'? '</a>' : ''
}
	
if (iedom||document.layers)
{
	with (document)
	{
		if (iedom)
		{
			write('<div style="overflow:hidden;"><div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
			write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:100%;"><table align="center"><tr><td height="'+marqueeheight+'" align="center" valign="middle">Loading . . .</td></tr></table>')
			write('</div><div id="iemarquee2" style="position:absolute;left:0px;top:0px;width:100%;">')
			write('</div></div></div>')
		}
		else if (document.layers)
		{
					write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee">')
					write('<layer name="ns_marquee2" width='+marqueewidth+' height='+marqueeheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
					write('</ilayer>')
			}
		}
	}
	
	function populate()
	{
		if (document.all)
		for (var i_tem = 0; i_tem < preload.length; i_tem++)
			if (typeof preload[i_tem].complete=='boolean'&&!preload[i_tem].complete)
			{
				setTimeout("populate();", 2000)
				return;
			}
			if (iedom)
			{
				cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
				cross_marquee2=document.getElementById? document.getElementById("iemarquee2") : document.all.iemarquee2
				cross_marquee.style.top=(full==1)? '0px' : parseInt(marqueeheight)+0+"px"
				cross_marquee2.innerHTML=cross_marquee.innerHTML=marqueecontent
				actualheight=cross_marquee.offsetHeight
				cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight+0)+"px" //indicates following #1
			}
			else if (document.layers)
			{
				ns_marquee=document.ns_marquee.document.ns_marquee2
				ns_marquee.top=parseInt(marqueeheight)+8
				ns_marquee.document.write(marqueecontent)
				ns_marquee.document.close()
				actualheight=ns_marquee.document.height
			}
			setTimeout('lefttime=setInterval("scrollmarquee()",20)',initPause)
	}
	
	window.onload=populate
	
	function scrollmarquee()
	{
		if (iedom)
		{
			if (parseInt(cross_marquee.style.top)<(actualheight*(-1)))
			cross_marquee.style.top=(parseInt(cross_marquee2.style.top)+actualheight)+"px"
			
			if (parseInt(cross_marquee2.style.top)<(actualheight*(-1)))
			cross_marquee2.style.top=(parseInt(cross_marquee.style.top)+actualheight)+"px"
			cross_marquee2.style.top=parseInt(cross_marquee2.style.top)-copyspeed+"px"
			cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
		}
		else if (document.layers)
		{
			if (ns_marquee.top>(actualheight*(-1)+8))
			ns_marquee.top-=copyspeed
			else
			ns_marquee.top=parseInt(marqueeheight)+8
		}
	}
	</script>