This manual image scroller allows you to scroll images horizontally left and right
The default size of your images can be any size as the script can be set to adjust the size to suit your layout.
You can adjust the size of the images shown in the scroller 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 50 will show your images at 50% 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 scroller and larger selfs are coded into the is1hArr 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 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.
When an image is clicked its larger version is shown in a new window.
This new window is sized to the image and can be positioned by changing variables popupLeft and popupTop
<HTML>
<HEAD>
<TITLE>Horizontal Image Scroller 1</TITLE>
<script type="text/javascript">
<!--
// Jeff
// www.huntingground.freeserve.co.uk
is1hArr=[
["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"]
]
imageSize=100 // % 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=5 // space between images
autoWidth=0 // 0 = no, 1 = yes, sets the width to the widest image size
defaultSpeed=2
maxSpeed=50
popupLeft= 100 // pixels
popupTop= 100 // pixels
totalWidth=0
displayWidth=0
displayHeight=0
speed=defaultSpeed
preload=[]
for(var i=0;i<is1hArr.length;i++){
preload[i]=[]
for(var j=0;j<is1hArr[i].length;j++){
preload[i][j]=new Image()
preload[i][j].src=is1hArr[i][j]
}
}
function initHS1(){
imgBox=document.getElementById("image_box")
imgNum=is1hArr.length
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",is1hArr[i][0])
newImg.setAttribute("id","pic"+i)
newImg.i=i
newImg.onclick=function(){getBigPic(this.i)}
newImg.onmouseover=function(){toggleOpac(this)}
newImg.onmouseout=function(){toggleOpac(this)}
if(imageSize!=0){ // use percentage size
newImg.style.width=preload[i][0].width/100*imageSize+"px"
newImg.style.height=preload[i][0].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 scrollHS1(n){
clearTimeout(leftTimer)
imgBoxPos=parseInt(imgBox.style.left)
if(n==1){
imgBoxPos-=speed
}
else{
imgBoxPos+=speed
}
imgBox.style.left=imgBoxPos+"px"
leftTimer=setTimeout("scrollHS1("+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)
}
picWin=null
function getBigPic(p){
if(is1hArr[p]&&is1hArr[p]!=""){
bigImg=new Image()
bigImg.src=is1hArr[p][1]
data="\n<center>\n<img src='"+bigImg.src+"'>\n</center>\n"
if(picWin){picWin.close()} // if window exists close it
winProps = "left= "+popupLeft+", top = "+popupTop+", width="+(bigImg.width+20)+", height="+(bigImg.height+20)+", scrollbars=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>")
picWin.document.close()
}
}
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="initHS1()" to the opening BODY tag
// -->
</script>
<style>
#image_box img{
border:1px solid #647369;
opacity:1
}
</style>
<!--[if IE]>
<style type="text/css">
#image_box img{
filter:alpha(opacity=100);
}
</style>
<! [endif]-->
</HEAD>
<BODY onload="initHS1()">
<h1>
<span>Horizontal Image Scroller 1</span></h1>
<center>
<DIV id="outer_box" style="color:white;text-align:left"></DIV> </center> </BODY> </HTML>