The default size of your scrolling images can be any size as the script can be set to show them in a variety of sizes.
My example display is using the actual full sized images shown at 20% of their default size, 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 50 will show your images at 50% of their default width and height sizes respectively. If you are going to use presized thumbnails the setting should be set at 100(%)
If you set variable imageSize to zero the values of fixedWidth and fixedHeight are applied to all the scrolling images.
You can adjust the space between the scrolling images by changing the value of variable spacerWidth
The width of the display is set within the scroll_box div, the height of the display is set automatically and is set to the height of the image with the largest height.
Mouseover the display to pause the scrolling, mouseout to restart, click on an image to fade in its full size version.
<HTML>
<HEAD>
<TITLE>Horizontal Image Scroller 5</TITLE>
<script type="text/javascript">
//Jeff
// www.huntingground.freeserve.co.uk
hs5Arr=[
//["thumb1.jpg","bigpic1.jpg","Alt Text 1"],
["pic01.jpg","pic01.jpg","Alt Text 1"],
["pic02.jpg","pic02.jpg","Alt Text 2"],
["pic03.jpg","pic03.jpg","Alt Text 3"],
["pic04.jpg","pic04.jpg","Alt Text 4"],
["pic05.jpg","pic05.jpg","Alt Text 5"],
["pic06.jpg","pic06.jpg","Alt Text 6"],
["pic07.jpg","pic07.jpg","Alt Text 7"],
["pic08.jpg","pic08.jpg","Alt Text 8"],
["pic09.jpg","pic09.jpg","Alt Text 9"],
["pic10.jpg","pic10.jpg","Alt Text 10"]
]
dir=0 // 0 = left 1 = right
speed=1
imageSize=20 // % set to zero to use fixedWidth and fixedHeight values
fixedWidth=100 // set a fixed width
fixedHeight=60 // set a fixed height
spacerWidth=20 // space between images
dualFade=0 // 0 = fades in, 1 = fades out then in
biggest=0
ieBorder=0
totalWidth=0
hs5Timer=null
lastN=0
count=0
fading=0
fadeStep = 2
fadeSpeed=10
minFadeValue=0
preload=new Array()
for(var i=0;i<hs5Arr.length;i++){
preload[i]=[]
for(var j=0;j<2;j++){
preload[i][j]=new Image()
preload[i][j].src=hs5Arr[i][j]
}
}
function initHS5(){
scrollBox=document.getElementById("scroll_box")
scroll1=document.getElementById("scroller1")
for(var k=0;k<hs5Arr.length;k++){
scroll1.innerHTML+='<img id="pic'+k+'" src="'+preload[k][0].src+'" alt="'+hs5Arr[k][2]+'" title="'+hs5Arr[k][2]+'" onclick="initFade('+k+')">'
if(imageSize!=0){ // use percentage size
newWidth=preload[k][0].width/100*imageSize
newHeight=preload[k][0].height/100*imageSize
}
else{ // use fixed size
newWidth=fixedWidth
newHeight=fixedHeight
}
document.getElementById("pic"+k).style.width=newWidth+"px"
document.getElementById("pic"+k).style.height=newHeight+"px"
if(document.getElementById("pic"+k).offsetHeight>biggest){
biggest=document.getElementById("pic"+k).offsetHeight
}
document.getElementById("pic"+k).style.marginLeft=spacerWidth+"px"
totalWidth+=document.getElementById("pic"+k).offsetWidth+spacerWidth
}
totalWidth+=1
for(var l=0;l<hs5Arr.length;l++){ // vertically center images
document.getElementById("pic"+l).style.marginBottom = (biggest-document.getElementById("pic"+l).offsetHeight)/2+"px"
}
if(scrollBox.currentStyle&&!window.opera&&document.compatMode!="CSS1Compat"){
ieBorder=parseInt(scrollBox.currentStyle.borderWidth)*2
}
scrollBox.style.height=biggest+ieBorder+"px"
scroll1.style.width=totalWidth+"px"
scroll2=document.getElementById("scroller2")
scroll2.innerHTML=scroll1.innerHTML
scroll2.style.left= scroll1.offsetWidth+"px"
scroll2.style.top= 0+"px" //-scroll1.offsetHeight+"px"
scroll2.style.width=totalWidth+"px"
if(dir==1){
speed= -speed
}
scrollHS5()
}
function scrollHS5(){
clearTimeout(hs5Timer)
scroll1Pos=parseInt(scroll1.style.left)
scroll2Pos=parseInt(scroll2.style.left)
scroll1Pos-=speed
scroll2Pos-=speed
scroll1.style.left=scroll1Pos+"px"
scroll2.style.left=scroll2Pos+"px"
hs5Timer=setTimeout("scrollHS5()",50)
if(dir==0){
if(scroll1Pos< -scroll1.offsetWidth){
scroll1.style.left=scroll1.offsetWidth+"px"
}
if(scroll2Pos< -scroll1.offsetWidth){
scroll2.style.left=scroll1.offsetWidth+"px"
}
}
if(dir==1){
if(scroll1Pos>parseInt(scrollBox.style.width)){
scroll1.style.left=scroll2Pos+ (-scroll1.offsetWidth)+"px"
}
if(scroll2Pos>parseInt(scrollBox.style.width)){
scroll2.style.left=scroll1Pos+ (-scroll2.offsetWidth)+"px"
}
}
}
st=null
function pause(){
clearTimeout(hs5Timer)
clearTimeout(st)
}
function reStartHS5(){
clearTimeout(st)
st=setTimeout("scrollHS5()",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=hs5Arr[picNum][1]
}
if(fadeValue>=100){ // fade in
fadeValue=100
fadeStep= -fadeStep
fading=0
clearTimeout(fadeTimer)
}
}
</script>
<style>
#scroll_box{
position:relative;
width:600px;
overflow:hidden;
background-color:#ddddee;
border:1px solid #bbbbcc;
text-align:left;
}
#scroller1 img, #scroller2 img{
border:1px solid #7777aa;
}
#bigpic{
opacity:0.9;
margin-top:20px;
}
</style>
<!--[if IE]>
<style type="text/css">
#imgtxt{
filter:alpha(opacity=75); /*opacity for IE */
}
#bigpic{
filter:alpha(opacity=100); /*opacity for IE */
}
</style>
<! [endif]-->
</HEAD>
<BODY onload="initHS5()">
<h1>Horizontal Image Scroller 5</h1>
<center>
<DIV id="scroll_box" onmouseover="pause()" onmouseout="reStartHS5()">
<div id="scroller1" style="position:absolute;left:0px;top:0px"></div>
<div id="scroller2" style="position:absolute"></div>
</DIV>
<img src="pic01.jpg" id="bigpic" name="bigpic">
</center>
</BODY>
</HTML>