Horizontal Image Scroller 2

This manual scrolling slideshow allows you to scroll the images horizontally left and right 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 40% 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 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
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 width of the display can be set manually or automatically by changing the value of variable autoWidth

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

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

When an image is clicked its larger version can either be shown in a new window or in the current page.

Copy the following into an empty page and then copy the appropriate function for showing the larger image into the end of the script

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

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

hs2Arr=[
["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"] // no comma after last index
]

imageSize=40 // % size the thumb 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

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

defaultSpeed=20
maxSpeed=50

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

totalWidth=0
displayWidth=0
displayHeight=0
step=defaultSpeed

thumbPos=[]

function initHS2(){

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

if(document.getElementById&&document.all&&document.compatMode!="CSS1Compat"){ // border needs adding to inner_box height in IE
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("id","pic"+i)
newImg.setAttribute("src",hs2Arr[i][0])

if(imageSize!=0){ // use percentage size
currentImage=new Image()
currentImage.src=hs2Arr[i][0]
thumbWidth=currentImage.width/100*imageSize
thumbHeight=currentImage.height/100*imageSize
}
else{ // use fixed size
thumbWidth=fixedWidth
thumbHeight=fixedHeight
}


newImg.style.width=thumbWidth+"px"
newImg.style.height=thumbHeight+"px"
newImg.style.marginRight=spacerWidth+"px"
newImg.i=i
newImg.onclick=function(){getBigPic(this.i)}
imgBox.appendChild(newImg)

}

for(var i=0;i<imgNum;i++){
totalWidth+=(document.getElementById("pic"+i).offsetWidth) // get all image widths
totalWidth+=spacerWidth

if(autoWidth==1){
if(document.getElementById("pic"+i).offsetWidth>displayWidth){ // set to largest image width
displayWidth=document.getElementById("pic"+i).offsetWidth
}

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


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

thumbPos[i]=totalWidth-(document.getElementById("pic"+i).offsetWidth)-spacerWidth //-ieBorder // get image positions

}

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

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

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

}

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

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

if(n==1){
if(count==imgNum-1){
return
}
else if(imgBoxPos== -(totalWidth-displayWidth)){ // if at right 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.left=imgBoxPos+"px"
timer=setTimeout("scrollHS2("+n+")",50)

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

if(imgBoxPos< -(totalWidth-displayWidth)){ // if at right end
imgBox.style.left= -(totalWidth-displayWidth)+"px"
clearTimeout(timer)
running=0
}

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

}

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

// -->
</script>

<style type="text/css">
#image_box img{
border:2px solid #647369;
}
 </style>
 
</HEAD>
<BODY onload="initHS2()">
<h1>Horizontal Image Scroller 2</h1>

<center>
<DIV id="outer_box" style="color:white;text-align:left">
<div id="inner_box" style="position:relative;width:482px;height:50px;overflow:hidden;border:4px solid #647369;background-color:#a6b0a6">
<div id="image_box" style="position:absolute;left:0px;top:0px"></div>
</div>

<div style="text-align:center">
<img src="arrprev.gif" alt="" onclick="scrollHS2(0)">
<img src="arrnext.gif" alt="" onclick="scrollHS2(1)">
</div>
</DIV>
</center>

</BODY>
</HTML>

If you want to open the larger pic in a new window add the following function to the end of the script

picWin=null

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

bigImg=new Image()
bigImg.src=hs2Arr[p][1]

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>")
}
}

If you want to display the larger image in your page put this image tag in your page