Results 1 to 6 of 6

Thread: Conveyor Belt Centered in frame and buy it now button

  1. #1
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Post Conveyor Belt Centered in frame and buy it now button

    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!
    Last edited by phazeshifta; 12-14-2009 at 09:46 PM. Reason: spelling

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    Put this in your stylesheet (they may be adjusted - with care):

    Code:
    #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:

    Code:
    <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:

    Code:
    <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:

    Code:
    \'
    Any questions, feel free to ask.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    phazeshifta (12-16-2009)

  4. #3
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks John,

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

  5. #4
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

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

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

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

    Code:
    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">'
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #6
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •