This version of the script allows different sets of images to be scrolled as selected by the user
Set auto to 1 to scroll through all categories
<HTML>
<HEAD>
<TITLE>Vertical Image Scroller 4 Categories</TITLE>
<script type="text/javascript">
<!--
// realised by apachejeff
// www.huntingground.freeserve.co.uk
// ********** User Defining Area **********
category0=[ // create a seperate array for each category, notice the number at the end of the array name is ordinal
["pic1.jpg","Category 1 pic 1",""],
["pic2.jpg","Category 1 pic 2",""],
["pic3.jpg","Category 1 pic 3",""],
["pic4.jpg","Category 1 pic 4",""]
]
category1=[
["pic5.jpg","Category 2 pic 1",""],
["pic6.jpg","Category 2 pic 2",""],
["pic7.jpg","Category 2 pic 3",""],
["pic8.jpg","Category 2 pic 4",""],
["pic9.jpg","Category 2 pic 5",""]
]
category2=[
["pic10.jpg","Category 3 pic 1",""],
["pic11.jpg","Category 3 pic 2",""],
["pic12.jpg","Category 3 pic 3",""],
["pic13.jpg","Category 3 pic 4",""],
["pic14.jpg","Category 3 pic 5",""],
["pic15.jpg","Category 3 pic 6",""]
]
category3=[
["pic16.jpg","Category 4 pic 1",""],
["pic17.jpg","Category 4 pic 2",""],
["pic18.jpg","Category 4 pic 3",""],
["pic19.jpg","Category 4 pic 4",""],
["pic20.jpg","Category 4 pic 5",""],
["pic21.jpg","Category 4 pic 6",""],
["pic22.jpg","Category 4 pic 7",""]
]
auto=0 // 0 = no, 1 = yes
dir=0 // 0 = up 1 = down
newWindow=1 // 0 = Open a new window for links 0 = no 1 = yes
imgPlaces=3 // number of images visible
imgWidth=50 // width of the images
imgHeight=67 // height of the images
imgSpacer=0// space between the images
border=1 // container border width
bordertype="solid" // container border type
bordercolor="silver" // container border colour
imgSpacerBg="black" // container background colour
cssPositioning=0 // use CSS to position the display 0 = no 1 = yes
cssLeft=-135 // used if cssPositioning is selected
cssTop=-125 // used if cssPositioning is selected
// ********** End User Defining Area **********
catCount=0
while(window["category"+catCount]){
catCount++
}
NumberOfCategories=catCount
step=1
nextPic=0
speed=50//35
timer=""
initPos=new Array()
nowDivPos=new Array()
moz=document.getElementById&&!document.all
function createThumbShow(){
if(cssPositioning==0){
document.write("<div id=\"container\" style=\"position:relative; width:0px;height:0px; border:"+border+"px " +bordertype+" "+bordercolor+";background:"+imgSpacerBg+"\">")
}
else{
document.write("<div id=\"container\" style=\"position:absolute; left:"+cssLeft+"px; top:"+cssTop+"px; width:0px;height:0px; border:"+border+" "+bordertype+" "+bordercolor+";background:"+imgSpacerBg+"\">")
}
document.write("<div id=\"display_area\" style=\"position:absolute; left:0; top:0; width:0px; height:0px; clip:rect(0,0,0,0)\" onmouseover=\"stopMe()\" onmouseout=\"animate()\">")
for(i=0;i<imgPlaces+1;i++){ // create image holders
document.write("<div id=\"div_"+[i]+"\" style=\"position:absolute\">")
document.write("<a id=\"loc_"+[i]+"\" href=\"\" onclick=\"newWin(this.location);return false\">")
document.write("<img src=\"\" id=\"pic_"+[i]+"\" width=\""+imgWidth+"\" height=\""+imgHeight+"\" alt=\"Multiple Image SlideShow\" border=\"0\">")
document.write("</a>")
document.write("</div>")
}
document.write("</div>")
document.write("</div>")
}
function init_thumbshow(n){
catNum=n
nextPic=0
containerBorder=parseInt(document.getElementById("container").style.borderWidth)*2
containerHeight=((imgPlaces)*imgHeight)+((imgPlaces-1)*imgSpacer)
document.getElementById("container").style.width=imgWidth+(!moz?containerBorder:"")
document.getElementById("container").style.height=containerHeight+(!moz?containerBorder:"")
displayArea=document.getElementById("display_area")
displayArea.style.height=containerHeight
displayArea.style.clip=(!moz?"rect(0,"+imgWidth+","+containerHeight+",0)":"rect(0,"+imgWidth+","+containerHeight+",0)")
imgPos= -document.getElementById("pic_0").height-border
for(i=0;i<imgPlaces+1;i++){
if(dir==0){imgPos+=(document.getElementById("pic_0").height)+imgSpacer} // if up
initPos[i]=imgPos
if(dir==0){document.getElementById("div_"+[i]).style.top=initPos[i]} // if up
if(dir==1){ // if down
document.getElementById("div_"+[(imgPlaces-i)]).style.top=initPos[i]
imgPos+=(document.getElementById("pic_0").height)+imgSpacer
}
if(nextPic>window["category"+catNum].length-1){
nextPic=0
}
document.getElementById("pic_"+[i]).src=window["category"+catNum][nextPic][0]
document.getElementById("pic_"+[i]).alt=window["category"+catNum][nextPic][1]
document.getElementById("loc_"+[i]).location=window["category"+catNum][nextPic][2]
nextPic++
}
animate()
}
timer=""
catNum=1
function animate(){
clearTimeout(timer)
for(i=0;i<imgPlaces+1;i++){
nowDivPos[i]=parseInt(document.getElementById("div_"+i).style.top)
if(dir==0){nowDivPos[i]-=step}
if(dir==1){nowDivPos[i]+=step}
if(dir==0&&nowDivPos[i]<= -(document.getElementById("pic_0").height+imgSpacer) ||dir==1&&nowDivPos[i]>containerHeight){
if(dir==0){document.getElementById("div_"+[i]).style.top=containerHeight+imgSpacer}
if(dir==1){document.getElementById("div_"+[i]).style.top= -document.getElementById("pic_0").height-(imgSpacer*2)}
if(nextPic>window["category"+catNum].length-1){
nextPic=0
if(auto==1){
catNum++
}
if(catNum==NumberOfCategories+1){
catNum=1
}
}
document.getElementById("pic_"+[i]).src=window["category"+catNum][nextPic][0]
document.getElementById("pic_"+[i]).alt=window["category"+catNum][nextPic][1]
document.getElementById("loc_"+[i]).location=window["category"+catNum][nextPic][2]
nextPic++
}
else{
document.getElementById("div_"+[i]).style.top=nowDivPos[i]
}
}
timer=setTimeout("animate()",speed)
}
function stopMe(){
clearTimeout(timer)
}
function newWin(loc){
if(loc==""){return}
if(newWindow==0){
location=loc
}
else{
window.open(loc)
//window.open(loc,'','left=130,top=270,width=200,height=200') // use for specific size and positioned window
}
}
// add onload="init_thumbshow(1)" to the opening BODY tag
// -->
</script>
</HEAD>
<BODY onload="init_thumbshow(1)">
<P>
<a href="#null" onclick="init_thumbshow(1)">Category 1</a><br>
<a href="#null" onclick="init_thumbshow(2)">Category 2</a><br>
<a href="#null" onclick="init_thumbshow(3)">Category 3</a><br>
<a href="#null" onclick="init_thumbshow(4)">Category 4</a><br>
<center>
<script type="text/javascript">
<!--
createThumbShow()
// -->
</script>
</center>
</BODY>
</HTML>