<HTML>
<HEAD>
<TITLE>Vertical Image Scroller 5</TITLE>
<script type="text/javascript">
//Jeff
// www.huntingground.freeserve.co.uk
vs5Arr=[
["pic01.jpg","pic01.jpg","Alt Text"],
["pic02.jpg","pic02.jpg","Alt Text"],
["pic03.jpg","pic03.jpg","Alt Text"],
["pic04.jpg","pic04.jpg","Alt Text"],
["pic05.jpg","pic05.jpg","Alt Text"],
["pic06.jpg","pic06.jpg","Alt Text"],
["pic07.jpg","pic07.jpg","Alt Text"],
["pic08.jpg","pic08.jpg","Alt Text"],
["pic09.jpg","pic09.jpg","Alt Text"],
["pic10.jpg","pic10.jpg","Alt Text"]
]
dir=1 // 0 = up 1 = down
speed=2
imageSize=30 // %
fixedWidth=100 // set a fixed width
fixedHeight=100 // set a fixed height
dualFade=0 // 0 = fades in, 1 = fades out then in
biggest=0
ieBorder=0
sv3Timer=null
lastN=0
count=0
fading=0
fadeStep = 2
fadeSpeed=10
minFadeValue=0
preload=new Array()
for(var i=0;i<vs5Arr.length;i++){
preload[i]=new Image()
preload[i].src=vs5Arr[i][0]
}
function initVS5(){
scrollBox=document.getElementById("scroll_box")
scroll1=document.getElementById("scroller1")
for(var j=0;j<vs5Arr.length;j++){
scroll1.innerHTML+='<img id="pic'+j+'" src="'+preload[j].src+'" alt="'+vs5Arr[j][2]+'" title="'+vs5Arr[j][2]+'" onclick="initFade('+j+')"><br>'
if(imageSize!=0){ // use percentage size
newWidth=preload[j].width/100*imageSize
newHeight=preload[j].height/100*imageSize
}
else{ // use fixed size
newWidth=fixedWidth
newHeight=fixedHeight
}
document.getElementById("pic"+j).style.width=newWidth+"px"
document.getElementById("pic"+j).style.height=newHeight+"px"
if(document.getElementById("pic"+j).offsetWidth>biggest){
biggest=document.getElementById("pic"+j).offsetWidth
}
}
if(scrollBox.currentStyle&&!window.opera&&document.compatMode!="CSS1Compat"){
ieBorder=parseInt(scrollBox.currentStyle.borderWidth)*2
}
scrollBox.style.width=biggest+ieBorder+"px"
scroll2=document.getElementById("scroller2")
scroll2.innerHTML=scroll1.innerHTML
scroll2.style.top=scroll1.offsetHeight+"px"
if(dir==0){
speed= -speed
}
scrollVS5()
}
function scrollVS5(){
clearTimeout(sv3Timer)
scroll1Pos=parseInt(scroll1.style.top)
scroll2Pos=parseInt(scroll2.style.top)
scroll1Pos+=speed
scroll2Pos+=speed
scroll1.style.top=scroll1Pos+"px"
scroll2.style.top=scroll2Pos+"px"
sv3Timer=setTimeout("scrollVS5()",60)
if(dir==0){
if(scroll1Pos< -scroll1.offsetHeight){
scroll1.style.top=scroll1.offsetHeight+"px"
}
if(scroll2Pos< -scroll1.offsetHeight){
scroll2.style.top=scroll1.offsetHeight+"px"
}
}
if(dir==1){
if(scroll1Pos>parseInt(scrollBox.style.height)){
scroll1.style.top=(scroll2Pos-scroll1.offsetHeight)+"px"
}
if(scroll2Pos>parseInt(scrollBox.style.height)){
scroll2.style.top=(scroll1Pos - scroll2.offsetHeight)+"px"
}
}
}
st=null
function pause(){
clearTimeout(sv3Timer)
clearTimeout(st)
}
function reStartHV5(){
clearTimeout(st)
st=setTimeout("scrollVS5()",100)
}
function initFade(n){
count=n
if(lastN==n||fading==1){return}
if(dualFade==0){fadeValue=0}
else{fadeValue=100}
picNum=n
lastN=n
fadePic()
}
function fadePic(){
displayEl=document.images["bigpic"]
fading=1
fadeValue -= fadeStep
fadeTimer=setTimeout("fadePic()",fadeSpeed)
if(displayEl.filters){displayEl.filters.alpha.opacity=fadeValue}
else{displayEl.style.opacity=(fadeValue/100)-0.1}
if(fadeValue<minFadeValue){ // for fade out first
fadeValue=minFadeValue
fadeStep= -fadeStep
displayEl.src=vs5Arr[picNum][1]
}
if(fadeValue>=100){ // fade in
fadeValue=100
fadeStep= -fadeStep
fading=0
clearTimeout(fadeTimer)
}
}
// add onload="initVS5()" to the opening body tag
</script>
<style type="text/css">
#scroller1 img,#scroller2 img{
margin-top:5px;
margin-bottom:5px;
border:4px solid #7777aa;
}
#bigpic{
margin-top:20px;
opacity:0.9;
}
</style>
<!--[if IE]>
<style type="text/css">
#bigpic{
filter:alpha(opacity=100); /*opacity for IE */
}
</style>
<! [endif]-->
</HEAD>
<BODY onload="initVS5()">
<h1>Vertical Image Scroller 5</h1>
<P>
<table style="border:0;width:100%;height:400px">
<tr>
<td>
<DIV id="scroll_box" style="position:relative;height:350px;overflow:hidden;background-color:#ddddee;border:4px solid #bbbbcc" onmouseover="pause()" onmouseout="reStartHV5()">
<div id="scroller1" style="position:absolute;left:0px;top:0px;text-align:center"></div>
<div id="scroller2" style="position:absolute;left:0px;top:0px;text-align:center"></div>
</DIV>
</td>
<td style="width:800px" align="center">
<img src="pic01.jpg" id="bigpic" name="bigpic" alt="">
</td>
</tr>
</table>
</BODY>
</HTML>
