Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Location
    Shropshire, UK
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Multiple slideshows on one page?

    When it comes to javascript I am a bit of a waste of space. So I was hoping someone might be able to put me in the way of adapting this wonderful little script by Tyler Clark so that I can put more than one slideshow on a page please:

    Code:
    <script language="javascript">
    
    /*
    Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
    For this script and more, visit http://www.javascriptkit.com
    */
    
    var delay=3000 //set delay in miliseconds
    var curindex=0
    
    var randomimages=new Array()
    
    	randomimages[0]="slideshow/work_SDC12423.png"
    	randomimages[1]="slideshow/work_SDC12424.png"
    	randomimages[2]="slideshow/work_SDC12498.png"
    
    	
    	
    
    var preload=new Array()
    
    for (n=0;n<randomimages.length;n++)
    {
    	preload[n]=new Image()
    	preload[n].src=randomimages[n]
    }
    
    document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')
    
    function rotateimage()
    {
    
    if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
    curindex=curindex==0? 1 : curindex-1
    }
    else
    curindex=tempindex
    
    	document.images.defaultimage.src=randomimages[curindex]
    }
    
    setInterval("rotateimage()",delay)
    
    </script>
    Grateful thanks in advance

    Graham

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    If you wish to use multiple scripts on the same page, you must change the second script so that each and every name of the variables and functions (including loop counters) is changed, as otherwise the second script will overwrite the first.

    So, for example, you must change

    var delay=3000 //set delay in miliseconds
    var curindex=0
    var randomimages=new Array()

    to (in the second script)

    var delay2=3000; //set delay in miliseconds
    var curindex2=0;
    var randomimages2=new Array();

    and throughout.

    This is an old script as can be discerned from <script language="javascript"> which is obsolete. Also, the semi-colons are missing from the end of the lines.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    grajay (03-30-2013)

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Location
    Shropshire, UK
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Philip

    Thank you SO much. Very much appreciated!

    Graham

  • #4
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by Philip M View Post
    If you wish to use multiple scripts on the same page, you must change the second script so that each and every name of the variables and functions (including loop counters) is changed, as otherwise the second script will overwrite the first.
    That's ok in this case where the op is not a javascript coder and just wants a quick fix.

    But to do it properly, because changing variable names is a real pita and prone to introducing errors/bugs, is to use object orientated js code. You create a single js "object" to manage the slideshow and then create an instance of that object for each slideshow you want to have on the page. Using OOP you will have only 1 set of variable and function names and so you won't have to muck around changing names of things for each slideshow.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by knightCoder View Post
    That's ok in this case where the op is not a javascript coder and just wants a quick fix.

    But to do it properly, because changing variable names is a real pita and prone to introducing errors/bugs, is to use object orientated js code. You create a single js "object" to manage the slideshow and then create an instance of that object for each slideshow you want to have on the page. Using OOP you will have only 1 set of variable and function names and so you won't have to muck around changing names of things for each slideshow.
    I entirely agree, but in this case OOP is probably too advanced a concept for the OP.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New to the CF scene
    Join Date
    Mar 2013
    Location
    Shropshire, UK
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    I entirely agree, but in this case OOP is probably too advanced a concept for the OP.
    You have hit the proverbial nail on the head Philip. But, I shall do a bit of reading up on javascript and see if I can start learning about it. Again, I am very grateful for your help.

    Graham

  • #7
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by Philip M View Post
    I entirely agree, but in this case OOP is probably too advanced a concept for the OP.
    That's why I said

    That's ok in this case where the op is not a javascript coder and just wants a quick fix.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    but he only has to use it and can lean from it

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    
    var zxcRandomSlideShow={
    
     init:function(o){
      var id=o.ID,obj=document.getElementById(id),src=o.SRCArray,hold=o.Hold,ld=o.Load,src=typeof(src)=='object'&&src.constructor==Array?src:[],ary=[],z0=0;
      if (obj&&obj.nodeName.toUpperCase()=='IMG'&&src[1]){
       for (;z0<src.length;z0++){
        ary[z0]=new Image();
        ary[z0].src=src[z0];
       }
       o.obj=obj;
       o.hold=(typeof(hold)=='number'&&hold>0?hold:2)*1000;
       this.load(o,ary,new Date(),(typeof(ld)=='number'&&ld>0?ld:5)*1000);
      }
     },
    
     load:function(o,ary,d,ms){
      clearTimeout(o.to);
      for (var oop=this,z0=0,z1=0;z0<ary.length;z0++){
       if (ary[z0].width<40&&new Date()-d<ms){
        o.to=setTimeout(function(){ oop.load(o,ary,d,ms); },200);
        return;
       }
      }
      for (;z1<ary.length;z1++){
       ary[z1].width<40?ary.splice(z1--,1):null;
      }
      o.ary=ary;
      o.lgth=ary.length;
      o.nu=-1;
      o.lgth>0?setInterval(function(){ oop.rotate(o,ary,d,ms); },o.hold):null;
     },
    
     rotate:function(o,ary){
      var nu=Math.floor(Math.random()*o.lgth);
      while (nu==o.nu){
       nu=Math.floor(Math.random()*o.lgth);
      }
      o.nu=nu;
      o.obj.src=o.ary[nu].src;
     }
    
    }
    
    </script>
    
    </head>
    
    <body>
    
    <img id="i1" src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" alt="img" />
    
    <img id="i2" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
    
    <script type="text/javascript">
    
    zxcRandomSlideShow.init({
     ID:'i1',   // the unique ID name of the image.                         (string)
     SRCArray:[ // an array ofimage SRCs.                                   (string)
      'http://www.vicsjavascripts.org.uk/StdImages/1.gif',
      'http://www.vicsjavascripts.org.uk/StdImages/2.gif',
      'http://www.vicsjavascripts.org.uk/StdImages/3.gif'
     ],
     Hold:4,   //(optional) the auto rotate hold delay in seconds.          (number, default = 2)
     Load:5    //(optional) the time allowed to load all images in seconds. (number, default = 5)
    });
    
    zxcRandomSlideShow.init({
     ID:'i2',   // the unique ID name of the image.                         (string)
     SRCArray:[ // an array ofimage SRCs.                                   (string)
      'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',
      'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',
      'http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg',
      'http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg',
      'http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg'
     ]
    });
    
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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