I did this and it worked (additions/changes highlighted):
Code:
<div id="showcontainer" style="position: relative; width: 715px; height: 233px;">
<div id="show" style="position: absolute; top: 0; left: 0; z-index: 2;"></div>
<script type="text/javascript">
//<![CDATA[
var slider=new Array()
slider[0]='<a href="jack_sparrow.htm"><img src="images/thumbs/1.jpg" alt="#" border=1><\/a>'
slider[1]='<a href="terminator.htm"><img src="images/thumbs/2.JPG" alt="#" border=1><\/a>'
slider[2]='<a href="rocky.htm"><img src="images/thumbs/3.JPG" alt="#" border=1><\/a>'
slider[3]='<a href="avatar.htm"><img src="images/thumbs/4.JPG" alt="#" border=1><\/a>'
slider[4]='<a href="superman.htm"><img src="images/thumbs/5.jpg" alt="#" border=1><\/a>'
slider[5]='<a href="hannibal.htm"><img src="images/thumbs/6.JPG" alt="#" border=1><\/a>'
////NO NEED TO EDIT BELOW THIS LINE////////////
function cbelt(slide, width, height, speed, bg, igap, sgap, altgap){
if(!document.getElementsByTagName||!document.createElement)
return;
if(!cbelt.ar)
cbelt.ar=[];
cbelt.ar[this.slid=cbelt.ar.length]=this;
this.slide='<nobr>'+slide.join(igap)+'<\/nobr>';
this.width=width;
this.height=height;
this.copyspeed=this.speed=speed;
this.sgap=sgap;
this.altgap=sgap-speed;
this.tspan=document.createElement('span');
this.tspan.id='temp'+this.slid;
this.tspan.style.visibility='hidden';
this.tspan.style.position='absolute';
this.tspan.style.top='-1000px';
this.tspan.style.left='-9000px';
this.tspan.innerHTML=this.slide;
with (document){
write('<table border="0" cellspacing="0" cellpadding="0"><td>')
write('<div style="position:relative;width:'+this.width+'px;height:'+this.height+'px;overflow:hidden">')
write('<div style="position:absolute;width:'+this.width+'px;height:'+this.height+'px;background-color:'+bg+'" onmouseover="cbelt.ar['+this.slid
+'].copyspeed=0" onmouseout="cbelt.ar['+this.slid+'].copyspeed=cbelt.ar['+this.slid+'].speed">')
write('<div id="test2'+this.slid+'" style="position:absolute;left:0px;top:0px"><\/div>')
write('<div id="test3'+this.slid+'" style="position:absolute;left:-1000px;top:0px"><\/div>')
write('<\/div><\/div>')
write('<\/td><\/table>')
}
document.body.insertBefore(this.tspan, document.body.firstChild)
this.fillup();
}
cbelt.prototype.fillup=function(){
var cacheobj=this;
this.timgs=document.getElementById('temp'+this.slid).getElementsByTagName('img')
for (var i_tem = 0; i_tem < this.timgs.length; i_tem++)
if(typeof this.timgs[i_tem].complete=='boolean'&&!this.timgs[i_tem].complete){
setTimeout(function(){cacheobj.fillup();}, 300);
return;
}
document.getElementById("show").style.display = 'none';
this.cross_slide=document.getElementById("test2"+this.slid);
this.cross_slide2=document.getElementById("test3"+this.slid);
this.cross_slide.innerHTML=this.cross_slide2.innerHTML=this.slide;
this.actualwidth=document.getElementById("temp"+this.slid).offsetWidth;
this.cross_slide2.style.left=this.actualwidth+this.sgap+"px"
this.lefttime=setInterval(function(){cacheobj.slideleft();}, 30);
}
cbelt.prototype.slideleft=function(){
if (parseInt(this.cross_slide.style.left)>(this.actualwidth*(-1)+8))
this.cross_slide.style.left=parseInt(this.cross_slide.style.left)-this.copyspeed+"px"
else{
this.cross_slide.style.left=parseInt(this.cross_slide2.style.left)+this.actualwidth+(this.agap? this.sgap : this.altgap)+"px"
this.agap=!this.agap;
}
if (parseInt(this.cross_slide2.style.left)>(this.actualwidth*(-1)+8))
this.cross_slide2.style.left=parseInt(this.cross_slide2.style.left)-this.copyspeed+"px"
else{
this.cross_slide2.style.left=parseInt(this.cross_slide.style.left)+this.actualwidth+(this.agap? this.sgap : this.altgap)+"px"
this.agap=!this.agap;
}
}
//]]>
</script> <script type="text/javascript">
//<![CDATA[
/* array_name - name of array of images for this show (unquoted variable name)
* width - show pixel width (unquoted integer)
* height - show pixel height (unquoted integer)
* speed - show speed - larger is faster ex:3 (unquoted integer) (range: 1-10)
* 'bgcolor' - show background-color, ex:'white' or '#eaeaea' (quoted string)
* 'image_gap' - gap between each image, use HTML, or space character (quoted string)
* slide_gap - pixels gap between each slideshow rotation (unquoted integer) */
//Usage:
//new cbelt(array_name, width, height, speed, 'bgcolor', 'image_gap', slide_gap)
new cbelt(slider, 715, 233, 1, '#ffffff', ' ', 4);
//]]>
</script>
</div><!-- End show -->
You can copy that over what you had as:
Code:
<div id="show"><script type="text/javascript">
//<![CDATA[
var slider=new Array()
slider[0]='<a hre . . .
. . . }
//]]>
</script> <script type="text/javascript">
//<![CDATA[
/* array_name - name of array of images for this show (unquoted variable name)
* width - show pixel width (unquoted integer)
* height - show pixel height (unquoted integer)
* speed - show speed - larger is faster ex:3 (unquoted integer) (range: 1-10)
* 'bgcolor' - show background-color, ex:'white' or '#eaeaea' (quoted string)
* 'image_gap' - gap between each image, use HTML, or space character (quoted string)
* slide_gap - pixels gap between each slideshow rotation (unquoted integer) */
//Usage:
//new cbelt(array_name, width, height, speed, 'bgcolor', 'image_gap', slide_gap)
new cbelt(slider, 715, 233, 1, '#ffffff', ' ', 4);
//]]>
</script>
</div><!-- End show -->
Can't get conveyor belt (background) loading.gif to work
Reply With Quote
Bookmarks