When a right or left thumbnail is clicked the thumbnails scroll once per click in the respective direction until the beginning or end is reached, the thumbnails larger self is also displayed with a fade in effect.
The thumbnails width and height are set in the script with the variables thumbWidth and thumbHeight
The space between the thumbnails is set with variable thumbSpace
To set the size of the display first set the width, height and margin of the large image hs2b_big_pic, the margin is used to give a border around the image, then set the width of the container div to the width of the image plus 2 times the margin
The thumbnails will be centered horizontally within the display providing you do not overdo the width and spacing of the thumbnails
The bottom margin of the thumb_container is set to the same margin as the large image
The thumbnail, larger image and text are entered into the hs2bArr array
["small.jpg","big.jpg","Text"],
If no text is required for a paticular image leave the quotes empty
A line of text can be shown with the images, if your text is going to use more than one line then adjust the height of the text div hs2b_text div to suit
<HTML>
<HEAD>
<TITLE>Horizontal Image Scroller 2b</TITLE>
<script type="text/javascript">
<!--
// Jeff
// www.huntingground.freeserve.co.uk
hs2bArr=[
["pic01sm.jpg","pic01.jpg","A line of text can be shown here"],
["pic02sm.jpg","pic02.jpg","Text vertically centered using height:40px and line-height:38px"],
["pic03sm.jpg","pic03.jpg","Enjoy"],
["pic04sm.jpg","pic04.jpg",""],
["pic05sm.jpg","pic05.jpg","Image 5"],
["pic06sm.jpg","pic06.jpg","Image 6"],
["pic07sm.jpg","pic07.jpg","Image 7"],
["pic08sm.jpg","pic08.jpg","Image 8"],
["pic09sm.jpg","pic09_2.jpg","Image 9"],
["gamessm.jpg","games.jpg","Image 10"] // no comma after last index
]
thumbWidth=120
thumbHeight=80
thumbSpace=5 // space between thumbs
doFade=1 // 0 = no fade 1 = apply fade effect
dualFade=0 // 0 = fades in, 1 = fades out then in
var preloadhs2bPics=[]
for(var i=0;i<hs2bArr.length;i++) {
preloadhs2bPics[i]=new Image()
preloadhs2bPics[i].src=hs2bArr[i][1]
}
function initHS2bFade(){
thumbPos=[]
defaultSpeed=20
step=defaultSpeed
thumbScrollerWidth=0
mainCont=document.getElementById("container")
bigPic=document.getElementById("hs2b_big_pic")
thumbContainer=document.getElementById("thumb_container")
thumbScroller=document.getElementById("thumb_scroller")
for(var i=0;i<hs2bArr.length;i++){
newImg=document.createElement("IMG")
newImg.setAttribute("id","pic"+i)
newImg.setAttribute("src",hs2bArr[i][0])
newImg.style.width=thumbWidth+"px"
newImg.style.height=thumbHeight+"px"
newImg.style.marginRight=thumbSpace+"px"
newImg.i=i
newImg.onclick=function(){swapHS2bPic(this.i)}
thumbScroller.appendChild(newImg)
if(i==0){newImg.style.borderColor="white"}
thumbScrollerWidth+=(newImg.offsetWidth+thumbSpace)
thumbPos[i]=(thumbScrollerWidth-newImg.offsetWidth)-thumbSpace // get image positions
}
//bigPic.style.width=parseInt(mainCont.style.width)
var el = document.getElementById("pic0")
isBorder=0
if(document.uniqueID && el.currentStyle){
isBorder=el.currentStyle.borderWidth
}
if(document.defaultView && document.defaultView.getComputedStyle){
isBorder=document.defaultView.getComputedStyle(el, '').getPropertyValue("border-top-width")
}
thumbContainer.style.width=(thumbWidth*3)+(thumbSpace*2)+((parseInt(isBorder)*2)*3)+"px"
thumbContainer.style.height=thumbHeight+(parseInt(isBorder)*2)+"px"
//thumbContainer.style.marginLeft=(mainCont.offsetWidth-thumbContainer.offsetWidth)/2+"px"
thumbContainer.style.clip="rect(0,"+(thumbContainer.offsetWidth+"px")+","+(thumbHeight+"px")+",0)"
thumbScroller.style.width=thumbScrollerWidth+"px"
halfWay=thumbContainer.offsetWidth/2
bigPic.src=hs2bArr[0][1]
document.getElementById("hs2b_text").innerHTML=hs2bArr[0][2]
}
function hs2bCurPos(e,id){
if(running==1){return}
e = e || window.event
if(e.clientX){
cursorX=e.clientX
cursorY=e.clientY
}
else{
cursorX=e.pageX - document.body.scrollLeft
cursorY=e.pageY - document.body.scrollTop
}
targetID=document.getElementById("thumb_container")
elPosX = targetID.offsetLeft
elPosY = targetID.offsetTop
parent_el = targetID.offsetParent
while (parent_el != null){
elPosX += parent_el.offsetLeft
elPosY += parent_el.offsetTop
parent_el = parent_el.offsetParent
}
divCurX=(cursorX-elPosX)+document.body.scrollLeft
divCurY=(cursorY-elPosY)+document.body.scrollTop
}
lastC=0
function swapHS2bPic(n){
if(running==1 || fading==1||lastC==n){return}
if(divCurX<thumbWidth){scrollHS2bFade(0)}
if(divCurX>thumbContainer.offsetWidth-thumbWidth){scrollHS2bFade(1)}
if(lastC!=null){document.getElementById("pic"+lastC).style.borderColor=""}
document.getElementById("pic"+n).style.borderColor="white"
lastC=n
if(doFade==1){
if(dualFade==0){fadeValue=0}
else{fadeValue=100}
picNum=n
fadeHS2bPic()
}
else{
bigPic.src=hs2bArr[n][1]
}
document.getElementById("hs2b_text").innerHTML=hs2bArr[n][2]
}
timer=""
count= 0
running=0
counted=0
function scrollHS2bFade(dir){
clearTimeout(timer)
thumbScrollerPos=parseInt(thumbScroller.style.left)
if(running==0){
if(dir==1){
if(thumbScrollerPos==0 && thumbPos[count]<halfWay){
count++
counted=1
scrollHS2bFade(dir)
return
}
if(counted==0){count++}
/*
if(count==hs2bArr.length-1){alert("1");return}
else if(thumbScrollerPos== -(thumbScrollerWidth-thumbContainer.offsetWidth)){alert("2");return}
else{if(counted==0){count++;alert("3")}}
*/
}
counted=0
if(dir==0){
if(count==0){return}
else{count--}
}
}
running=1
if(dir==1){thumbScrollerPos-=step}
else{thumbScrollerPos+=step}
thumbScroller.style.left=thumbScrollerPos+"px"
timer=setTimeout("scrollHS2bFade("+dir+")",50)
imgStartPos= -thumbPos[count]+(halfWay-(document.getElementById("pic"+count).offsetWidth/2))
if(dir==1&&thumbScrollerPos<imgStartPos+step){
thumbScroller.style.left=imgStartPos+"px"
clearTimeout(timer)
running=0
}
if(thumbScrollerPos< -(thumbScrollerWidth-thumbContainer.offsetWidth)){ // if at right end
thumbScroller.style.left= -(thumbScrollerWidth-thumbContainer.offsetWidth)+thumbSpace+"px"
clearTimeout(timer)
running=0
count=hs2bArr.length-2
}
if(dir==0){
if(thumbScrollerPos>imgStartPos-step){ // if at next left position
thumbScroller.style.left=imgStartPos+"px"
clearTimeout(timer)
running=0
}
if(thumbScrollerPos>=0){ // when scrolling left, if next image is < half display width and image box = zero
thumbScroller.style.left=0+"px"
clearTimeout(timer)
running=0
}
}
}
fading=0
fadeStep = 4
minFadeValue=0
function fadeHS2bPic(){
fading=1
fadeValue -= fadeStep
fadeTimer=setTimeout("fadeHS2bPic()",10)
if(bigPic.filters){bigPic.filters.alpha.opacity=fadeValue}
else{bigPic.style.MozOpacity=(fadeValue/100)-0.1}
if(fadeValue<minFadeValue){
fadeValue=minFadeValue
fadeStep= -fadeStep
bigPic.src=hs2bArr[picNum][1]
}
if(fadeValue>=100){
fadeValue=100
fadeStep= -fadeStep
fading=0
clearTimeout(fadeTimer)
}
}
// add onload="initHS2bFade()" to the opening BODY tag
// -->
</script>
<style type="text/css">
#thumb_container{
cursor:pointer
}
#thumb_scroller img{
border:2px solid #647369;
}
#hs2b_big_pic{
opacity:1;
}
</style>
<!--[if IE]>
<style type="text/css">
#thumb_container{
cursor:hand
}
#hs2b_big_pic{
filter:alpha(opacity=100);
}
</style>
<! [endif]-->
</HEAD>
<BODY onload="initHS2bFade()">
<h1>Horizontal Image Scroller 2b</h1>
<center>
<DIV id="container" style="width:420px;color:white;text-align:center;border:1px solid black;background-color:black">
<img id="hs2b_big_pic" src="" alt="" style="width:400px;height:300px;margin:10px;display:block">
<div id="thumb_container" style="position:relative;overflow:hidden;margin:0 auto 10px auto;border:0px solid #647369">
<div id="thumb_scroller" style="position:absolute;left:0px;top:0px" onmousemove="hs2bCurPos(event,this.id)"></div>
</div>
<div id="hs2b_text" style="height:40px;line-height:38px;color:#647369;border:1px solid #647369"></div>
</DIV>
</center>
</BODY>
</HTML>