Put this in your stylesheet (they may be adjusted - with care):
#temp0 td, #test20 td, #test30 td {
padding: 0 0.5em;
text-align: center;
}
#temp0 img, #test20 img, #test30 img {
margin-bottom: 0.25em;
}
Use this version of the scirpt:
<script type="text/javascript">
/***********************************************
* Conveyor belt slideshow script-© Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Modified for multiple use in http://www.dynamicdrive.com/forums by:
* John Davenport Scheuer - username:jscheuer
***********************************************/
//Specify the slider images
var slider=new Array()
slider[0]='<a href="http://www.beanbagbuilder.com/store-products-3-FT-Kids-Bag-3-FT-Kids-Bag_1095898105.html"><img src="/custom_theme/images/3ft-rounded.png" alt="" border="0" /></a><br><input type="button" onclick="whatever" value="Buy Now">'
slider[1]='<a href="http://www.beanbagbuilder.com/store-products-5-FT-Personal-5-FT-Personal_1095898106.html"><img src="/custom_theme/images/5ft-rounded.png" alt="" border="0" /></a><br><input type="button" onclick="whatever" value="Buy Now">'
slider[2]='<a href="http://www.beanbagbuilder.com/store-products-6-FT-Cuddle-Bag-6-FT-Cuddle-Bag_1095898107.html"><img src="/custom_theme/images/6ft-rounded.png" alt="" border="0" /></a><br><input type="button" onclick="whatever" value="Buy Now">'
slider[3]='<a href="http://www.beanbagbuilder.com/store-products-7-FT-Sofa-7-FT-Sofa_1095898108.html"><img src="/custom_theme/images/7ft-rounded.png" alt="" border="0" /></a><br><input type="button" onclick="whatever" value="Buy Now">'
slider[4]='<a href="http://www.beanbagbuilder.com/store-products-8-FT-Village-Bag-8-FT-Village-Bag_1095898109.html"><img src="/custom_theme/images/8ft-rounded.png" alt="" border="0" /></a><br><input type="button" onclick="whatever" value="Buy Now">'
slider[5]='<a href="http://www.beanbagbuilder.com/store-products-Covers-Covers_1095898103.html"><img src="/custom_theme/images/covers-rounded.png" alt="" border="0" /></a><br><input type="button" onclick="whatever" value="Buy Now">'
slider[6]='<a href="http://www.beanbagbuilder.com/store-products-Extra-Filling-Extra-Filling_1095898104.html"><img src="/custom_theme/images/filling-rounded.png" alt="" border="0" /></a><br><input type="button" onclick="whatever" value="Buy Now">'
////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='<table><tr><td>'+slide.join('<\/td><td>')+'<\/td><\/tr><\/table>';
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:9px"><\/div>')
write('<div id="test3'+this.slid+'" style="position:absolute;left:-1000px;top:9px"><\/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;
}
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>
Use this for the script call:
<script type="text/javascript">
/* 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, 650, 188, 2, '#64D507', ' ', 0);
</script>
The image_gap is now controlled by the added style padding at the top of this post. The slide_gap should be 0, the padding also works between slides. I've given the buttons an onclick event of "whatever", but you will want to use something real. If it contains single quotes ('), they must be escaped:
\'
Any questions, feel free to ask.