Menu
I have created a slideshow for displaying rotating images for a client and they are happy enough with it. However, they would like to be able to have multiple instances of the slide show on one page (for forums or something I guess) and this is a little beyond me at the moment as I never took the time learn object programming (yes yes, I know!). I would be forever in your debt if you could help me out here. Below is the code as I have it now.
Regards,
Paul Whitrow
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title> New Document </title>
<meta name=”Author” content=””>
<meta name=”Keywords” content=””>
<meta name=”Description” content=””>
</head>
<body>
<script type=”text/javaScript”>
<!–
// create and load image array
slideShowTitle = ‘Human Anatomical Details’;
var imgArray=new Array();
imgArray[0] = new Image();
imgArray[0].src = ‘
imgArray[0].lnk = ‘
imgArray[0].alt = ‘Picture of male torso’;
imgArray[1] = new Image();
imgArray[1].src = ‘
imgArray[1].lnk = ‘
imgArray[1].alt = ‘Picture of nervous system’;
imgArray[2] = new Image();
imgArray[2].src = ‘
imgArray[2].lnk = ‘
imgArray[2].alt = ‘Picture of Lower Arm and Pelvis Bones’;
imgArray[3] = new Image();
imgArray[3].src = ‘
imgArray[3].lnk = ‘
imgArray[3].alt = ‘Picture of Lower Arm and Pelvis Musculature’;
imgArray[4] = new Image();
imgArray[4].src = ‘
imgArray[4].lnk = ‘
imgArray[4].alt = ‘Picture of Lower Arm and Pelvis Nervous System’;
imgArray[5] = new Image();
imgArray[5].src = ‘
imgArray[5].lnk = ‘
imgArray[5].alt = ‘Picture of Spinal Column Bones’;
// user variables
var sliderWidth=300;
// user variables
// DO NOT EDIT BELOW THIS LINE!
var imgSpace=1;
var sliderHeight=50;
var imageHeight=sliderHeight;
var t;
var x=0;
var w=0;
var imgstr=”;
var LBT,LBH,LB,SH,SC;
var opera=false;
var moz=false;
var ie=false;
if ((navigator.userAgent).indexOf(“Opera”)!=-1) opera=true;
if (navigator.appName==”Netscape”) moz=true;
if ((navigator.appName).indexOf(“Microsoft”)!=-1) ie=true;
function getObj(cls){
var grp = document.getElementsByTagName(‘div’);
for(a=0; a < grp.length; a++){
if(grp[a].className){
if(grp[a].className == cls){
return grp[a];
}
}
}
}
function loading(){
LBT = getObj(‘loadbartext’);
LBH = getObj(‘loadbarholder’);
LB = getObj(‘loadbar’);
SH = getObj(‘scrollholder’);
SC = getObj(‘scrollcontent’);
y = imgArray.length;
if(x < y){
LBT.innerHTML=’Loading image ‘+(x+1)+’ of ‘+y;
if(moz || opera){
if(imgArray[x].width > 0){
w += imgArray[x].width;
x += 1;
}
}else if(ie){
if(imgArray[x].complete){
w += imgArray[x].width;
x += 1;
}
}
LB.style.width = Math.round(LBH.offsetWidth / y) * x;
t=setTimeout(“loading()”,100);
}else{
clearTimeout(t);
w += (imgArray.length
loaded();
}
}
function loaded(){
getObj(‘loader’).style.display = ‘none’;
SC.style.width = w;
SC.style.display = ‘block’;
SC.style.left = sliderWidth;
scroll();
}
function scroll(){
SC.style.left = (SC.offsetLeft)-1;
if((SC.offsetLeft) <= -((SC.offsetWidth)-sliderWidth)){
SC.innerHTML = imgstr + imgstr
}
if((SC.offsetLeft) == -w){
SC.style.left = 0
}
//window.status=SC.offsetLeft+”:”+(-w)
t=setTimeout(“scroll()”,20);
}
function stopscroll(){
clearTimeout(t);
}
for(a=0; a < imgArray.length; a++){
imgstr+='<a href=”‘+imgArray[a].lnk+'”><img src=”‘+imgArray[a].src+'” alt=”‘+imgArray[a].alt+'” border=”0″ /></a>’;
}
var str=”;
str+='<style type=”text/css”>’;
str+=’.container{border:1px solid #ccc;width:’+sliderWidth+’px;background-color:#eee;}’;
str+=’.box{border-top:1px solid #fff;border-bottom:1px solid #fff;width:’+sliderWidth+’px;}’;
str+=’.scrollholder{position:relative;height:’+sliderHeight+’px; width:’+sliderWidth+’px;background-color:#fafafa;overflow:hidden;}’;
str+=’.scrollcontent{position:relative; white-space:nowrap; display:none;}’;
str+=’.scrollcontent img{ height:’+imageHeight+’px; margin-right:’+imgSpace+’px;}’;
str+=’.loader{position:relative;display:block;margin-top:10px;text-align:center;font:600 7pt verdana,sans-serif;color:#666;text-align:center;}’;
str+=’.loadbarholder{margin:0 auto;height:10px; width:130px; background-color:#eee; margin-top:3px;text-align:left;}’;
str+=’.loadbar{height:10px; background-color:#ccc;}’;
str+=’.slidetitle{font-family:verdana;font-size:8pt;line-height:1.4em;margin:0 2px;color:#666;text-transform:uppercase;letter-spacing:-1px;}’;
str+=’.slidetext{text-align:right;font-family:verdana;font-size:7pt;line-height:1.5em;margin:0 2px;color:#999;}’;
str+=’.slidetext a{color:#777;}’;
str+='</style>’;
str+='<div class=”container”>’;
str+='<div class=”slidetitle”>’+slideShowTitle+'</div>’;
str+='<div class=”box”>’;
str+='<div class=”scrollholder”>’;
str+='<div class=”loader”>’;
str+='<div class=”loadbartext”></div>’;
str+='<div class=”loadbarholder”>’;
str+='<div class=”loadbar”></div>’;
str+='</div>’;
str+='</div>’;
str+='<div class=”scrollcontent” onmouseover=”stopscroll()” onmouseout=”scroll()”>’;
str+=imgstr;
str+='</div>’;
str+='</div>’;
str+='</div>’;
str+='<div class=”slidetext”><a href=”http://slide.gr0w.com”>Slide</a> by <a href=”
str+='</div>’;
document.write(str);
loading();
//–>
</script>
</body>
</html>