Horizontal Image Scroller 1b

<HTML>
<HEAD>
<TITLE>Horizontal Image Scroller 1b</TITLE>

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

is1hbArr=[

["pic01sm.jpg","pic01.jpg"],
["pic02sm.jpg","pic02.jpg"],
["pic03sm.jpg","pic03.jpg"],
["pic04sm.jpg","pic04.jpg"],
["pic05sm.jpg","pic05.jpg"],
["pic06sm.jpg","pic06.jpg"],
["pic07sm.jpg","pic07.jpg"],
["pic08sm.jpg","pic08.jpg"],
["pic09sm.jpg","pic09.jpg"],
["pic10sm.jpg","pic10.jpg"],
["pic11sm.jpg","pic11.jpg"],
["pic12sm.jpg","pic12.jpg"],
["pic13sm.jpg","pic13.jpg"]

]

dualFade=0 // 0 = fades in, 1 = fades out then in

imageSize=0 // % size the image is shown at, if set to zero the fixed width and heights are used
fixedWidth=75 // set a fixed width
fixedHeight=50 // set a fixed height
spacerWidth=5 // space between images

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

defaultSpeed=2 
maxSpeed=50

totalWidth=0
displayWidth=0
displayHeight=0
speed=defaultSpeed

preload=new Array()
for(var i=0;i<is1hbArr.length;i++){
preload[i]=new Image()
preload[i].src=is1hbArr[i][0]
}

function initHS1F(){
imgBox=document.getElementById("image_box") // element containing the images
imgNum=is1hbArr.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++){ // set image size

newImg=document.createElement("IMG")
newImg.setAttribute("src",is1hbArr[i][0])
newImg.setAttribute("id","pic"+i)
newImg.i=i
newImg.onclick=function(){initFade(this.i)}

newImg.onmouseover=function(){toggleOpac(this)}
newImg.onmouseout=function(){toggleOpac(this)}

if(imageSize!=0){ // use percentage size
newImg.style.width=preload[i].width/100*imageSize+"px"
newImg.style.height=preload[i].height/100*imageSize+"px"
}
else{ // use fixed size
newImg.style.width=fixedWidth+"px"
newImg.style.height=fixedHeight+"px"
}

imgBox.appendChild(newImg)

}

for(var i=0;i<imgNum;i++){
totalWidth+=(document.getElementById("pic"+i).offsetWidth)
document.getElementById("pic"+i).style.marginRight=spacerWidth+"px"

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

}
else{
displayWidth=parseInt(document.getElementById("inner_box").style.width)
}


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

}

for(var i=0;i<imgNum;i++){ // vertically center images
document.getElementById("pic"+i).style.marginBottom=(displayHeight-document.getElementById("pic"+i).height)/2+"px"
}

totalWidth=totalWidth+(imgNum*spacerWidth)

imgHolderWidth=displayWidth+ieBorder
document.getElementById("outer_box").style.width=imgHolderWidth+"px"
document.getElementById("inner_box").style.width=imgHolderWidth+"px"
imgBox.style.width=totalWidth+"px"

imgHolderHeight=displayHeight+ieBorder
document.getElementById("inner_box").style.height=imgHolderHeight+"px" 
document.getElementById("inner_box").style.clip="rect(0,"+(imgHolderWidth+"px")+","+(imgHolderHeight+"px")+",0)"

}

leftTimer=""
function scrollHS1F(n){

clearTimeout(leftTimer)
imgBoxPos=parseInt(imgBox.style.left)
if(n==1){
imgBoxPos-=speed
}
else{
imgBoxPos+=speed
}

imgBox.style.left=imgBoxPos+"px"
leftTimer=setTimeout("scrollHS1F("+n+")",50)

if(n==1&&imgBoxPos< -(totalWidth-imgHolderWidth)+(spacerWidth-ieBorder)){
imgBox.style.left=-(totalWidth-imgHolderWidth)+spacerWidth-ieBorder+"px"
clearTimeout(leftTimer)
}

if(n==0&&imgBoxPos> 0-speed){
imgBox.style.left=0
clearTimeout(leftTimer)
}

}

function fast(){
speed=maxSpeed
}

function slow(){
speed=defaultSpeed
}

function pause(){
clearTimeout(leftTimer)
}

lastN=0
count=0
fading=0
fadeStep = 2
fadeSpeed=10
minFadeValue=0

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.MozOpacity=(fadeValue/100)-0.1}

if(fadeValue<minFadeValue){ // for fade out first
fadeValue=minFadeValue
fadeStep= -fadeStep
displayEl.src=is1hbArr[picNum][1]
}

if(fadeValue>=100){ // fade in
fadeValue=100
fadeStep= -fadeStep
fading=0
clearTimeout(fadeTimer)
}
}

maxOpac=70
minOpac=100

function toggleOpac(obj){

if(obj.filters){

if(obj.filters.alpha.Opacity==minOpac){
obj.filters.alpha.Opacity=maxOpac}
else{obj.filters.alpha.Opacity=minOpac}

}
else{

if(obj.style.opacity == maxOpac/100){
obj.style.opacity = minOpac/100}
else{obj.style.opacity = maxOpac/100}

}

}

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

// -->
</script>

<style type="text/css">
#image_box img{
border:1px solid #647369;
opacity:1
}

#bigpic{
opacity:0.9;
}
</style>

<!--[if IE]>
<style type="text/css">
#image_box img{
filter:alpha(opacity=100);
}

#bigpic{
filter:alpha(opacity=100);
}
</style>
<! [endif]-->
 
</HEAD>
<BODY onload="initHS1F()">
<h1>Horizontal Image Scroller 1b</h1>

<DIV id="outer_box" style="color:white;text-align:left">

</div>

</DIV>

<P><img src="pic01.jpg" alt="" id="bigpic" name="bigpic" style="margin-top:20px"></P>

</BODY>
</HTML>