Conveyor Belt Centered in frame and buy it now button

[phazeshifta]

Hello!

The help this website gives is amazing, and you all do a great job of helping.

<<This problem solved>>

I am trying to add a Buy it Now button under each of the images that will scroll along with the gallery.

http://www.beanbagbuilder.com is the page this is going on if it helps!

Thanks everyone!

[jscheuer1]

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.

[phazeshifta]

Thanks John,

Trying to get it working right now, I'll let you know how it goes!

[phazeshifta]

hmm, added the scripts to the index.html file and css files and its not working. I replaced the buttons with what I thought was the right onclick command...do you see any errors I made?

Thanks again!

[jscheuer1]

You missed escaping some of those (')s and the ones you did escape you did wrong using an added space and the wrong slash:

 /'

Should be (no added space and the correct slash):

\'

It's only your array entries that are wrong, here's the corrected version of those:

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="window.location=\'http://www.beanbagbuilder.com/store-products-3-FT-Kids-Bag-3-FT-Kids-Bag_1095898105.html\'" 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="window.location=\'http://www.beanbagbuilder.com/store-products-3-FT-Kids-Bag-3-FT-Kids-Bag_1095898105.html\'" 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="window.location=\'http://www.beanbagbuilder.com/store-products-3-FT-Kids-Bag-3-FT-Kids-Bag_1095898105.html\'" 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="window.location=\'http://www.beanbagbuilder.com/store-products-3-FT-Kids-Bag-3-FT-Kids-Bag_1095898105.html\'" 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="window.location=\'http://www.beanbagbuilder.com/store-products-3-FT-Kids-Bag-3-FT-Kids-Bag_1095898105.html\'" 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="window.location=\'http://www.beanbagbuilder.com/store-products-3-FT-Kids-Bag-3-FT-Kids-Bag_1095898105.html\'" 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="window.location=\'http://www.beanbagbuilder.com/store-products-3-FT-Kids-Bag-3-FT-Kids-Bag_1095898105.html\'" value="Buy Now">'

[phazeshifta]

Thanks again, John, I'd be lost in life if it wasn't for people like you! It worked perfect!