[RESOLVED] Help with random slideshow please

Printable View

10-25-2012, 05:05 PM
wallacekp

1 Attachment(s)

[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.Attachment 15159
10-26-2012, 07:07 AM
vwphillips

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>
10-26-2012, 09:46 AM
wallacekp

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.

Quote:

<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>
10-26-2012, 11:19 AM
vwphillips

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>
10-29-2012, 05:46 PM
wallacekp

Great stuff - many thanks.