Vertical Image Scroller 1

This manual scrolling slideshow allows you to scroll through the images vertically up and down
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 is using the actual full sized images shown at 25% 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, the default setting is 100(%).
Example: setting this value to 25 will show your images at 25% of their default width and height sizes respectively.

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

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

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 autoHeight is set to zero the style height 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.

When you mouseover a direction button the display scrolls at a default speed, when you mousedown on a direction button the speed is increased, onmouseup returns the speed to the default setting.
You can adjust the default and maximum speeds at variables defaultSpeed and maxSpeed within the script. 













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

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

is1vArr=[
["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=25 // % 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
spacerWidth=10 // space between images

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

defaultSpeed=2 
maxSpeed=50

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

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

function initVS1(){

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

if(document.getElementById&&document.all&&document.compatMode!="CSS1Compat"){
ieBorder=parseInt(document.getElementById("inner_box").style.borderWidth)*2
}
else{
ieBorder=0
}

for(var i=0;i<imgNum;i++){

if(imageSize!=0){ // use percentage size
//imgTags[i].style.width=imgTags[i].offsetWidth/100*imageSize+"px"
imgTags[i].style.height=(imgTags[i].offsetHeight/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)
document.getElementById("pic"+i).style.marginBottom=spacerWidth+"px"

if(autoHeight==1){
if(document.getElementById("pic"+i).offsetHeight>displayHeight){
displayHeight=document.getElementById("pic"+i).offsetHeight
}

}
else{
displayHeight=parseInt(document.getElementById("inner_box").style.height)
}


if(document.getElementById("pic"+i).offsetWidth>displayWidth){
displayWidth=document.getElementById("pic"+i).offsetWidth+ieBorder
}

}

totalHeight=totalHeight+(imgNum*spacerWidth)

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("outer_box").style.width=imgHolderWidth+"px"
document.getElementById("inner_box").style.width=imgHolderWidth+"px" //isBorder+
document.getElementById("inner_box").style.clip="rect(0,"+(imgHolderWidth+"px")+","+(imgHolderHeight+"px")+",0)"

}

timer=""
function scrollVS1(n){
clearTimeout(timer)

imgBoxPos=parseInt(imgBox.style.top)
if(n==1){
imgBoxPos-=step
}
else{
imgBoxPos+=step
}

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

if(n==1&&imgBoxPos< -(totalHeight-imgHolderHeight)+(step+spacerWidth)){
imgBox.style.top=-(totalHeight-imgHolderHeight)+spacerWidth+"px"
clearTimeout(timer)
}

if(n==0&&imgBoxPos> 0-step){
imgBox.style.top=0
clearTimeout(timer)
}

}

function fast(){
step=maxSpeed
}

function slow(){
step=defaultSpeed
}

function pause(){
clearTimeout(timer)
}


picWin=null

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

bigImg=new Image()
bigImg.src=is1vArr[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 style='background-color:black;margin-top:10px;margin-left:10px'>\n")
picWin.document.write("<div id=\"display\">"+data+"<\/div>")
picWin.document.write("\n<\/BODY>\n<\/HTML>")
}
}

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

// -->
</script>

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

<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" onmouseover="scrollVS1(0)" onmouseout="pause()" onmousedown="fast()" onmouseup="slow()">
<img src="arrwu.gif" onmouseover="scrollVS1(1)" onmouseout="pause()" onmousedown="fast()" onmouseup="slow()">
</div>

</DIV>

</BODY>
</HTML>