Results 1 to 4 of 4

Thread: Conveyor belt slideshow

  1. #1
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up Conveyor belt slideshow

    1) Script Title: conveyor belt sideshow script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rightslide.htm

    3) Describe problem:
    Well first off the script works perfectly but my problem is that I can't post more than one of them on the same page. I searched this form and found someone that had the same problem:
    http://www.dynamicdrive.com/forums/s...light=conveyor

    The Mod's resolution was to use this:
    http://home.comcast.net/~jscheuer1/s...onveyor_oo.htm

    But I want to be able to post the slideshows at different places on the website I dont want it to be one under the other.

    I have one posted on one page and another posted on a different page then I have a script that brings the two pages together and there I have my problem because only one slideshow show up.

    So can anyone help me out with my problem??

    Thanks a million for any help.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Using:

    http://home.comcast.net/~jscheuer1/s...onveyor_oo.htm

    You can put them wherever you like. The code in the body from that demo:

    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, 300, 225, 2, '#eaeaea', ' ', 4);
    </script>
    <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
    <a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
    <script type="text/javascript">
    new cbelt(slider2, 300, 225, 3, '#eaeaea', ' ', 4);
    </script>
    shows two distinct Conveyors. They appear one over the other because they are separated only by a paragraph. The first one has more code because it includes the explanation of the variable's values and usage instructions as comments (in green in the above). By placing each one in separate table cells, or divisions, etc., they may be positioned wherever you like on your page.
    - John
    ________________________

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

  3. #3
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank your for your fast reply.

    So basically I put this in the header of the pages that have the script:
    HTML 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://"><img src="photo1.jpg" border=1></a>'
    slider[1]='<a href="http://"><img src="photo2.jpg" border=1></a>'
    slider[2]='<a href="http://"><img src="photo3.jpg" border=1></a>'
    slider[3]='<a href="http://"><img src="photo4.jpg" border=1></a>'
    slider[4]='<a href="http://"><img src="photo5.jpg" border=1></a>'
    
    //Specify a second slider images (use only for more than one show, use as many as needed)
    var slider2=new Array()
    slider2[0]='<a href="http://"><img src="photo6.jpg" border=1></a>'
    slider2[1]='<a href="http://"><img src="photo7.jpg" border=1></a>'
    slider2[2]='<a href="http://"><img src="photo8.jpg" border=1></a>'
    slider2[3]='<a href="http://"><img src="photo9.jpg" border=1></a>'
    slider2[4]='<a href="http://"><img src="photo1.jpg" 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;
    }
    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>

    And use this to specify the slideshow in the body of the pages:
    HTML 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, 300, 225, 2, '#eaeaea', ' ', 4);
    </script>
    But is there a way to be able to specify what images are used, in the body code?
    For example would putting this code:
    HTML Code:
    var slider=new Array()
    slider[0]='<a href="http://"><img src="photo1.jpg" border=1></a>'
    slider[1]='<a href="http://"><img src="photo2.jpg" border=1></a>'
    slider[2]='<a href="http://"><img src="photo3.jpg" border=1></a>'
    slider[3]='<a href="http://"><img src="photo4.jpg" border=1></a>'
    slider[4]='<a href="http://"><img src="photo5.jpg" border=1></a>'
    Here:
    HTML Code:
    <script type="text/javascript">
    new cbelt(var slider=new Array()
    slider[0]='<a href="http://"><img src="photo1.jpg" border=1></a>'
    slider[1]='<a href="http://"><img src="photo2.jpg" border=1></a>'
    slider[2]='<a href="http://"><img src="photo3.jpg" border=1></a>'
    slider[3]='<a href="http://"><img src="photo4.jpg" border=1></a>'
    slider[4]='<a href="http://"><img src="photo5.jpg" border=1></a>', 300, 225, 2, '#eaeaea', ' ', 4);
    </script>
    Still make the script work?

    Because I use a script to post to my pages and I don't want to have to go change the header every time I post a different slideshow in my webpages.

    Thanks again, your help in anyway is very much appreciated.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Yes, but it will not work quite like that. You can just move the array definitions to right before the call though, ex:

    Code:
    <script type="text/javascript">
    var slider2=new Array()
    slider2[0]='<a href="http://"><img src="photo6.jpg" border=1></a>'
    slider2[1]='<a href="http://"><img src="photo7.jpg" border=1></a>'
    slider2[2]='<a href="http://"><img src="photo8.jpg" border=1></a>'
    slider2[3]='<a href="http://"><img src="photo9.jpg" border=1></a>'
    slider2[4]='<a href="http://"><img src="photo1.jpg" border=1></a>'
    new cbelt(slider2, 300, 225, 3, '#eaeaea', ' ', 4);
    </script>
    If you do do this, just don't forget to remove the array definitions from the main script. Any that you leave behind there may conflict with this style of coding it.
    - John
    ________________________

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

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

    princemac (07-31-2008)

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
  •