www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Help with random slideshow please

Hybrid View

  1. #1
    Join Date
    Jan 2006
    Location
    Surrey, UK
    Posts
    64

    resolved [RESOLVED] Help with random slideshow please

    I have taken coding provided by Tyler Clarke who I can't now contact to ask this question. Any one else able to advise please.

    Our church web site includes 62 gif files showing the flags of each nation represented in our congregation. I used to show these alphabetically but poor old Wales, and Zimbabwe etc had to wait a long time to see their flags. Tyler's code allowed for random show but it is truly random in that one flag may keep appearing whilst others never seem to.
    Is there a way in which it can play 1 -62 randomly and then start again with another 1-62 randomly. At least then people would know the longest they have to wait is for 61 other flags.
    Hope this makes sense. Grateful for any help.flags.txt

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,644
    You do not show the script you are using

    so a simple slide show with the shuffle in red

    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">
    /*<![CDATA[*/
    // Simple Fade Slide Show (09-September-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcFade={
    
     init:function(o){
      var id=o.ID,ary=o.SRCArray,ims=o.FadeInDuration,oms=o.FadeOutDuration,hold=o.HoldDelay,obj=document.getElementById(id),ims=typeof(ims)=='number'?ims:typeof(oms)=='number'?oms:1000,s=o.Shuffle,img,oo,z0=0;
      for (;z0<ary.length;z0++){
       img=new Image();
       img.src=ary[z0][0];
       ary[z0][0]=img;
      }
      oo=this['zxc'+id]={
       obj:obj,
       a:obj.parentNode,
       ary:ary,
       lgth:ary.length-1,
       ims:ims,
       oms:typeof(oms)=='number'?oms:ims,
       hold:typeof(hold)=='number'?hold:ims*2,
       now:100,
       cnt:0
      }
      if (o.Shuffle===true){
       oo.ary=this.shuffle(oo.ary);
       obj.src=oo.ary[0][0].src;
       oo.a.removeAttribute('href');
       if (oo.ary[0][1]){
        oo.a.href=oo.ary[0][1];
       }
      }
      this.Auto(id,oo.hold);
     },
    
     Auto:function(id,ms){
      var o=this['zxc'+id]
      if (o){
       var oop=this;
       o.to=setTimeout(function(){ oop.next(id,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id]
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id]
      if (o){
       this.next(id,o.cnt+(typeof(ud)=='number'&&ud<0?-1:1));
      }
     },
    
     GoTo:function(id,nu){
      var o=this['zxc'+id]
      if (o&&o.ary[nu]&&nu!=o.cnt){
       this.next(id,nu);
      }
     },
    
     next:function(id,auto){
      var o=this['zxc'+id],nu;
      if (o){
       this.Pause(id);
       o.auto=auto===true;
       nu=o.auto?o.cnt+1:auto;
       o.cnt=nu<0?o.lgth:nu>o.lgth?0:nu;
       o.a.removeAttribute('href');
       clearTimeout(o.dly);
       this.animate(o,o.obj,o.now,0,new Date(),o.oms);
      }
     },
    
     shuffle:function(ary){
      for (var r,t,z0=0;z0<ary.length;z0++){
       r=Math.floor(Math.random()*ary.length);
       t=ary[z0];
       ary[z0]=ary[r];
       ary[r]=t;
      }
      return ary;
     },
    
     animate:function(o,obj,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       obj.style.filter='alpha(opacity='+now+')';
       obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
       o.now=now;
      }
      if (ms<mS){
       o.dly=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS); },10);
      }
      else {
       if (t==0){
        obj.src=o.ary[o.cnt][0].src;
        if (o.ary[o.cnt][1]){
         o.a.href=o.ary[o.cnt][1];
        }
        clearTimeout(o.dly);
        this.animate(o,o.obj,o.now,100,new Date(),o.ims);
       }
       else if (o.auto){
        oop.Auto(obj.id,o.hold);
       }
      }
     }
    
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
    <input type="button" name="" value="GoTo 0" onmouseup="zxcFade.GoTo('frontphoto',0);"  />
    <input type="button" name="" value="GoTo 1" onmouseup="zxcFade.GoTo('frontphoto',1);"  />
    <input type="button" name="" value="GoTo 2" onmouseup="zxcFade.GoTo('frontphoto',2);"  />
    <input type="button" name="" value="GoTo 3" onmouseup="zxcFade.GoTo('frontphoto',3);"  />
    <input type="button" name="" value="GoTo 4" onmouseup="zxcFade.GoTo('frontphoto',4);"  />
    <input type="button" name="" value="Next" onmouseup="zxcFade.Next('frontphoto',1);"  />
    <input type="button" name="" value="Back" onmouseup="zxcFade.Next('frontphoto',-1);"  />
    <br />
    <a><img id="frontphoto" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" border="0" onmouseover="zxcFade.Pause('frontphoto');" onmouseout="zxcFade.Auto('frontphoto');" /></a>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    zxcFade.init({
     ID:'frontphoto',
     SRCArray:[
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','URL1.htm'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','URL2.htm'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','URL3.htm'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','URL4.htm'],
      ['http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg','URL5.htm']
     ],
     FadeInDuration:1000,
     FadeOutDuration:500,
     HoldDelay:3000,
     Shuffle:true,
    });
    
    
    /*]]>*/
    </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/

  3. #3
    Join Date
    Jan 2006
    Location
    Surrey, UK
    Posts
    64
    Thanks Vic. I had tried to attach my code in flags.txt but I'll have another go. As you can see, it seems easier to work through for an amateur like me.
    <script language="javascript">

    /*
    Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
    For this script and more, visit http://www.javascriptkit.com
    */

    var delay=1500 //set delay in miliseconds
    var curindex=0

    var randomimages=new Array()

    randomimages[0]="images/flags/australia.gif"
    randomimages[1]="images/flags/belgium.gif"
    randomimages[2]="images/flags/zimbabwe.gif"
    randomimages[3]="images/flags/england.gif"
    randomimages[4]="images/flags/guyana.gif"
    randomimages[5]="images/flags/burkina faso.gif"
    randomimages[6]="images/flags/canada.gif"
    randomimages[7]="images/flags/caymen.gif"
    randomimages[8]="images/flags/costa rica.gif"
    randomimages[9]="images/flags/croatia.gif"
    randomimages[10]="images/flags/czech.gif"
    randomimages[11]="images/flags/denmark.gif"
    randomimages[12]="images/flags/ecuador.gif"
    randomimages[13]="images/flags/france.gif"
    randomimages[14]="images/flags/germany.gif"
    randomimages[15]="images/flags/hungary.gif"
    randomimages[16]="images/flags/india.gif"
    randomimages[17]="images/flags/ireland.gif"
    randomimages[18]="images/flags/italy.gif"
    randomimages[19]="images/flags/jamaica.gif"
    randomimages[20]="images/flags/japan.gif"
    randomimages[21]="images/flags/malta.gif"
    randomimages[22]="images/flags/venezula.gif"
    randomimages[23]="images/flags/netherlands.gif"
    randomimages[24]="images/flags/new zealand.gif"
    randomimages[25]="images/flags/nigeria.gif"
    randomimages[26]="images/flags/peru.gif"
    randomimages[27]="images/flags/philippines.gif"
    randomimages[28]="images/flags/poland.gif"
    randomimages[29]="images/flags/portugal.gif"
    randomimages[30]="images/flags/scotland.gif"
    randomimages[31]="images/flags/slovakia.gif"
    randomimages[32]="images/flags/south africa.gif"
    randomimages[33]="images/flags/spain.gif"
    randomimages[34]="images/flags/sri lanka.gif"
    randomimages[35]="images/flags/switzerland.gif"
    randomimages[36]="images/flags/trinidad and tobago.gif"
    randomimages[37]="images/flags/uk.gif"
    randomimages[38]="images/flags/usa.gif"
    randomimages[39]="images/flags/wales.gif"
    randomimages[40]="images/flags/namibia.gif"
    randomimages[41]="images/flags/hongkong.gif"
    randomimages[42]="images/flags/china.gif"
    randomimages[43]="images/flags/iraq.gif"
    randomimages[44]="images/flags/malawi.gif"
    randomimages[45]="images/flags/indonesia.gif"
    randomimages[46]="images/flags/mauritius.gif"
    randomimages[47]="images/flags/brazil.gif"
    randomimages[48]="images/flags/gibraltar.gif"
    randomimages[49]="images/flags/uganda.gif"
    randomimages[50]="images/flags/colombia.gif"
    randomimages[51]="images/flags/chile.gif"
    randomimages[52]="images/flags/cameroon.gif"
    randomimages[53]="images/flags/paraquay.gif"
    randomimages[54]="images/flags/ghana.gif"
    randomimages[55]="images/flags/belarus.gif"
    randomimages[56]="images/flags/mexico.gif"
    randomimages[57]="images/flags/austria.gif"
    randomimages[58]="images/flags/suriname.gif"
    randomimages[59]="images/flags/lithuania.gif"
    randomimages[60]="images/flags/Guadeloupe.gif"
    randomimages[61]="images/flags/angola.gif"

    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]
    }
    fadeduration: 2500, //transition duration (milliseconds)
    setInterval("rotateimage()",delay)

    </script>

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,644
    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>
    </head>
    
    <body>
    <script language="javascript">
    
    /*
    Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
    For this script and more, visit http://www.javascriptkit.com
    */
    
    var delay=1500; //set delay in miliseconds
    var curindex=0;
    
    var randomimages=[];
    
    randomimages[0]="http://www.vicsjavascripts.org.uk/StdImages/One.gif";
    randomimages[1]="http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
    randomimages[2]="http://www.vicsjavascripts.org.uk/StdImages/Three.gif";
    
    for (var r,t,z0=0;z0<randomimages.length;z0++){
     r=Math.floor(Math.random()*randomimages.length);
     t=randomimages[z0];
     randomimages[z0]=randomimages[r];
     randomimages[r]=t;
    }
    
    var preload=[];
    
    for (n=0;n<randomimages.length;n++){
     preload[n]=new Image();
     preload[n].src=randomimages[n];
    }
    
    document.write('<img name="defaultimage" src="'+randomimages[0]+'">');
    
    function rotateimage(){
     curindex=++curindex%randomimages.length;
     document.images.defaultimage.src=randomimages[curindex];
    }
    
    setInterval("rotateimage()",delay)
    
    </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/

  5. #5
    Join Date
    Jan 2006
    Location
    Surrey, UK
    Posts
    64
    Great stuff - many thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles