Vertical Image Scroller 2

This manual scrolling slideshow allows you to scroll the images vertically up and down by clicking a direction arrow
The default size of your images can be any size as the script can be set to show them in a variety of sizes.

My example display above is using the actual full sized images shown at 100% of their default size, click on an image to see it full size in a new window.

You can adjust the size of the images shown in the display either by percentage or with a fixed value by changing the value of variable imageSize.
Example: setting this value to 30 will show your images at 30% of their default width and height sizes respectively.

If you set variable imageSize to zero the values of fixedHeight and fixedHeight are applied to all the images.

You can adjust the space between the images by changing the value of variable spacerHeight

The images for the display are coded into the image_box div

When an image is clicked its larger version can be shown in a new window.
The larger images are coded into the array in the same order that they are shown in the display, if you are using the full sized images in the display they must still be put in the array.

The height of the display can be set manually or automatically by changing the value of variable autoHeight

If autoHeight is set to 1 the script will set the display to the height of the image with the largest height
If autoWidth is set to zero the style width value of the "inner_box" div is used

The width of the display is set automatically and is set to the width of the image with the largest width. 

<HTML>
<HEAD>
<TITLE>Vertical Image Scroller 2</TITLE>

<script type="text/javascript">
<!--
// realised by apachejeff
// www.huntingground.freeserve.co.uk

vs2Arr=[
["pic1.jpg"],
["pic2.jpg"],
["pic3.jpg"],
["pic4.jpg"],
["pic5.jpg"],
["pic6.jpg"],
["pic7.jpg"],
["pic8.jpg"],
["pic9.jpg"],
["pic10.jpg"] // no comma after last index
]

imageSize=40 // % size the image is shown at, if set to zero the fixed width and heights are used
fixedWidth=100 // set a fixed width
fixedHeight=100 // set a fixed height
spacerHeight=10 // space between images

autoHeight=0 // 0 = no, 1 = yes, sets the width to the widest image size

defaultSpeed=20

popupLeft= 100 // pixels
popupTop= 100 // pixels

totalHeight=0
displayWidth=0
displayHeight=0
step=defaultSpeed

thumbPos=new Array()

function initVS2(){

imgBox=document.getElementById("image_box") // element containing the images
imgTags=imgBox.getElementsByTagName("IMG")
imgNum=imgTags.length // number of images

if(document.getElementById&&document.all){ // border needs adding to inner_box size in IE
ieBorder=parseInt(document.getElementById("inner_box").style.borderWidth)*2
}
else{
ieBorder=0
}

for(var i=0;i<imgNum;i++){ // set image size

if(imageSize!=0){ // use percentage size
//currentImage=new Image()
//currentImage.src=vs2Arr[i]
//imgTags[i].style.height=currentImage.height/100*imageSize+"px"
imgTags[i].style.height=imgTags[i].offsetHeight/100*imageSize+"px"
//imgTags[i].style.width=(imgTags[i].offsetWidth/100)*imageSize+"px"
}
else{ // use fixed size
imgTags[i].style.width=fixedWidth+"px"
imgTags[i].style.height=fixedHeight+"px"
}

}

for(var i=0;i<imgNum;i++){
totalHeight+=(document.getElementById("pic"+i).offsetHeight) // get all image heights
totalHeight+=spacerHeight
document.getElementById("pic"+i).style.marginBottom=spacerHeight+"px" // add spacer

if(autoHeight==1){
if(document.getElementById("pic"+i).offsetHeight>displayHeight){ // set to largest image height
displayHeight=document.getElementById("pic"+i).offsetHeight
}

}
else{
displayHeight=parseInt(document.getElementById("inner_box").style.height) // set to div height
}


if(document.getElementById("pic"+i).offsetWidth>displayWidth){ // set to largest image width
displayWidth=document.getElementById("pic"+i).offsetWidth+ieBorder // include border for IE
}

thumbPos[i]=totalHeight-(document.getElementById("pic"+i).offsetHeight)-spacerHeight // get image positions

}

imgHolderHeight=displayHeight
document.getElementById("outer_box").style.height=imgHolderHeight+"px"
document.getElementById("inner_box").style.height=imgHolderHeight+"px"
imgBox.style.height=totalHeight+"px"

imgHolderWidth=displayWidth
document.getElementById("inner_box").style.width=imgHolderWidth+"px" //isBorder+
document.getElementById("inner_box").style.clip="rect(0,"+(imgHolderHeight+"px")+","+(imgHolderWidth+"px")+",0)"

}

timer=""
count= 0
running=0
function scrollVS2(n){
clearTimeout(timer)

imgBoxPos=parseInt(imgBox.style.top)
if(running==0){

if(n==1){
if(count==imgNum-1){
return
}
else if(imgBoxPos== -(totalHeight-displayHeight)){ // if at bottom end
return
}
else{count++}
}

if(n==0){
if(count==0){return}
else{count--}
}

}

running=1

if(n==1){imgBoxPos-=step}
else{imgBoxPos+=step}

imgBox.style.top=imgBoxPos+"px"
timer=setTimeout("scrollVS2("+n+")",50)

if(n==1&&imgBoxPos< -thumbPos[count]){ // if at next bottom postion
imgBox.style.top=-thumbPos[count]+"px"
clearTimeout(timer)
running=0
}

if(imgBoxPos< -(totalHeight-displayHeight)){ // if at bottom end
imgBox.style.top= -(totalHeight-displayHeight)
clearTimeout(timer)
running=0
}

if(n==0&&imgBoxPos> -thumbPos[count]){ // if at next top position
imgBox.style.top=-thumbPos[count]
clearTimeout(timer)
running=0
}

}

picWin=null

function getBigPic(p){
if(vs2Arr[p]&&vs2Arr[p]!=""){

bigImg=new Image()
bigImg.src=vs2Arr[p]

data="\n<center>\n<img src='"+bigImg.src+"'>\n</center>\n"

if(picWin){picWin.close()} // if window exists close it
var winProps = "left= "+popupLeft+", top = "+popupTop+", width="+(bigImg.width+20)+", height="+(bigImg.height+20)+", scrollbars=no, toolbar=no, directories=no, menu bar=no, resizable=yes, status=no" 
picWin=window.open("","win1",winProps)
picWin.document.write("<HTML>\n<HEAD>\n<TITLE></TITLE>\n")
picWin.document.write("</HEAD>\n")
picWin.document.write("<BODY bgcolor='black' topmargin=10px leftmargin=10>\n")
picWin.document.write("<div id=\"display\">"+data+"</div>")
picWin.document.write("\n</BODY>\n</HTML>")
}
}

//add onload="initVS2()" to the opening BODY tag

// -->
</script>

<style>
#image_box img{
border:4px solid #7777aa;
}
 </style>
 
</HEAD>
<BODY onload="initVS2()">
<h1>Vertical Image Scroller 2</h1>

<center>

<DIV id="outer_box">
<div id="inner_box" style="position:relative;width:50px;height:350px;overflow:hidden;border:4px solid #bbc;text-align:center;background-color:#dde"> 
<div id="image_box" style="position:absolute;left:0px;top:0px">
<img id="pic0" src="pic1.jpg" alt="" onclick="getBigPic(0)"><br>
<img id="pic1" src="pic2.jpg" alt="" onclick="getBigPic(1)"><br>
<img id="pic2" src="pic3.jpg" alt="" onclick="getBigPic(2)"><br>
<img id="pic3" src="pic4.jpg" alt="" onclick="getBigPic(3)"><br>
<img id="pic4" src="pic5.jpg" alt="" onclick="getBigPic(4)"><br>
<img id="pic5" src="pic6.jpg" alt="" onclick="getBigPic(5)"><br>
<img id="pic6" src="pic7.jpg" alt="" onclick="getBigPic(6)"><br>
<img id="pic7" src="pic8.jpg" alt="" onclick="getBigPic(7)"><br>
<img id="pic8" src="pic9.jpg" alt="" onclick="getBigPic(8)"><br>
<img id="pic9" src="pic10.jpg" alt="" onclick="getBigPic(9)"><br>
</div>

</div>

<div style="position:relative;text-align:center;z-index:50">
<img src="arrwd.gif" onclick="scrollVS2(0)">
<img src="arrwu.gif" onclick="scrollVS2(1)">
</div>

</DIV>

</center>

</BODY>
</HTML>