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 20% 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 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 images.
You can adjust the space between the 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.
When an image is clicked you can have its larger version open in a new window or load another page into the new window, if it is an image the window is automatically resized to the images size, when this new window is opened the scrolling is pause and will restart when the new window is hidden behind another window.
If you are going to use presized thumbnails for the display they are enter in the arrays 1st index, the larger image is entered in the arrays 2nd index, if another page is to be opened this will go in the arrays 2nd index instead of the larger image.
["thumb1.jpg","bigpic1.jpg","Alt Text 1"],
["thumb2.jpg","bigpic2.jpg","Alt Text 2"],
["thumb3.jpg","yourpage.htm","Alt text 3"],
If you are going to use the full sized images in the display and resize them using the script it is entered in the arrays 1st and 2nd index
["pic1.jpg","pic1.jpg","Alt Text 1"],
["pic2.jpg","pic2.jpg","Alt Text 2"],
["pic3.jpg","yourpage.htm","Alt Text 3"],
<HTML>
<HEAD>
<TITLE>Horizontal Image Scroller 4</TITLE>
<script type="text/javascript">
hs4Arr=[
["pic1.jpg","pic1.jpg","Alt Text 1"],
["pic2.jpg","page1.htm","Alt Text 1"],
["pic3.jpg","pic3.jpg","Alt Text 1"],
["pic4.jpg","",""],
["pic5.jpg","",""],
["pic6.jpg","",""],
["pic7.jpg","",""],
["pic8.jpg","",""],
["pic9.jpg","",""],
["pic10.jpg","",""] // no comma at the end of last index
]
dir=0 // 0 = left 1 = right
speed=3
imageSize=100 // % 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
alwaysCenter=1 // center the popup 0 = no 1 = yes
popupLeft=0 // popup default left, use if not centering
popupTop=0 // popup default top, use if not centering
biggest=0
ieBorder=0
totalWidth=0
hs4Timer=null
preload=new Array()
for(var i=0;i<hs4Arr.length;i++){
preload[i]=new Image()
preload[i].src=hs4Arr[i][0]
}
function initHS4(){
scroll1=document.getElementById("scroller1")
for(var j=0;j<hs4Arr.length;j++){
scroll1.innerHTML+='<img id="pic'+j+'" src="'+preload[j].src+'" alt="'+hs4Arr[j][2]+'" title="'+hs4Arr[j][2]+'" onclick="showBigPic('+j+')">'
if(imageSize!=0){ // use percentage size
newWidth=preload[j].width/100*imageSize
newHeight=preload[j].height/100*imageSize
}
else{ // use fixed size
newWidth=fixedWidth
newHeight=fixedHeight
}
document.getElementById("pic"+j).style.width=newWidth+"px"
document.getElementById("pic"+j).style.height=newHeight+"px"
if(document.getElementById("pic"+j).offsetHeight>biggest){
biggest=document.getElementById("pic"+j).offsetHeight
}
document.getElementById("pic"+j).style.marginLeft=spacerWidth+"px"
totalWidth+=document.getElementById("pic"+j).offsetWidth+spacerWidth
}
totalWidth+=1
for(var k=0;k<hs4Arr.length;k++){ // vertically center images
if(document.getElementById&&document.all){
ieBorder=parseInt(scrollBox.style.borderTopWidth)*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"
scroll2.style.width=totalWidth+"px"
if(dir==1){
speed= -speed
}
scrollHS4()
}
function scrollHS4(){
if(paused==1){return}
clearTimeout(hs4Timer)
scroll1Pos=parseInt(scroll1.style.left)
scroll2Pos=parseInt(scroll2.style.left)
scroll1Pos-=speed
scroll2Pos-=speed
scroll1.style.left=scroll1Pos+"px"
scroll2.style.left=scroll2Pos+"px"
hs4Timer=setTimeout("scrollHS4()",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(hs4Timer)
clearTimeout(st)
}
function reStartHS4(){
clearTimeout(st)
st=setTimeout("scrollHS4()",100)
}
paused=0
picWin=null
function showBigPic(p){
if(hs4Arr[p][1]!=""){
paused=1
if(picWin&&picWin.open&&!picWin.closed){picWin.close()} // if picWin exists close it
if(hs4Arr[p][1].indexOf("jpg")!=-1){
bigImg=new Image()
bigImg.src=hs4Arr[p][1]
if(alwaysCenter==1){
popupLeft = (screen.availWidth - bigImg.width) / 2
popupTop = (screen.availHeight - bigImg.height) / 2
}
data="\n<center>\n<img src='"+bigImg.src+"'>\n<\/center>\n"
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>")
}
else{
picWin=window.open(hs4Arr[p][1])
}
}
}
window.onfocus=function(){
paused=0
scrollHS4()
}
onunload=function(){ // close the popup when leaving page
if(picWin&&picWin.open&&!picWin.closed){
picWin.close()
}
}
</script>
<style>
#scroller1 img, #scroller2 img{
border:4px solid #7777aa;
}
</style>
</HEAD>
<BODY onload="initHS4()">
<h1>Horizontal Image Scroller 4</h1>
<center>
<DIV id="scroll_box" style="position:relative;width:600px;overflow:hidden;background-color:#ddddee;border:4px solid #bbbbcc;text-align:left" onmouseover="pause()" onmouseout="reStartHS4()">
<div id="scroller1" style="position:absolute;left:0px;top:0px"></div> <div id="scroller2" style="position:absolute"></div> </DIV> </center> </BODY> </HTML>