PDA

View Full Version : Conveyor Belt with Buttons



haygen89
05-21-2009, 06:42 AM
1) Script Title: Conveyor Belt slideshow script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/leftrightslide.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:


<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>