Multiframe slideshow need help to randomize images please

[nemetzger]

Using this script here: http://livingstonesconnect.com/lsm/i.../06/25/welcome

1) Script Title: Multiframe Image Slideshow

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

3) Describe problem: Would like to make images random in two different ways.

3a)The first way is to make the image sequence random. Instead of having to order the image sequence as below, I would like to just list the images and have the order random.

var seqslides=new Array()
//Set Path to Image plus optional URL ("" for no URL):
seqslides[0]=["/lsm/media/blogs/lsministries/jam522pic1.jpg",""]
seqslides[1]=["/lsm/media/blogs/lsministries/jam522pic2.jpg",""]

3b) The second way is to randomize what picture is changed next. I am showing 5 pics across. Right now, when it gets to picture 6, it changes picture 1, then picture 2 changes to picture 7. I would like it to randomly change. Example: 5 pictures are showing when you load page. Then the 4th picture changes, then the 1st picture changes, then the 5th, etc etc. Is that possible?

Full code:

<script type="text/javascript">

/***********************************************
* MultiFrame Image 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
***********************************************/

var seqslides=new Array()
//Set Path to Image plus optional URL ("" for no URL):
seqslides[0]=["/lsm/media/blogs/lsministries/jam522pic1.jpg",""]
seqslides[1]=["/lsm/media/blogs/lsministries/jam522pic2.jpg",""]
seqslides[2]=["/lsm/media/blogs/lsministries/jam522pic3.jpg",""]
seqslides[3]=["/lsm/media/blogs/lsministries/jam626pic3.jpg",""]
seqslides[4]=["/lsm/media/blogs/lsministries/jam626pic1.jpg",""]
seqslides[5]=["/lsm/media/blogs/lsministries/jam522pic5.jpg",""]
seqslides[6]=["/lsm/media/blogs/lsministries/jam522pic6.jpg",""]
seqslides[7]=["/lsm/media/blogs/lsministries/jam522pic4.jpg",""]
seqslides[8]=["/lsm/media/blogs/lsministries/jam626pic4.jpg",""]
seqslides[9]=["/lsm/media/blogs/lsministries/soulgenpic1.jpg",""]
seqslides[10]=["/lsm/media/blogs/lsministries/soulgenpic7.jpg",""]
seqslides[11]=["/lsm/media/blogs/lsministries/nicbpic2.jpg",""]
seqslides[12]=["/lsm/media/blogs/lsministries/soulgenpic4.jpg",""]
seqslides[13]=["/lsm/media/blogs/lsministries/soulgenpic5.jpg",""]
seqslides[14]=["/lsm/media/blogs/lsministries/nicbpic1.jpg",""]
seqslides[15]=["/lsm/media/blogs/lsministries/funpic1.jpg",""]
seqslides[16]=["/lsm/media/blogs/lsministries/nicbpic3.jpg",""]

//Set pause between each image display (2000=2 second):
var slidedelay=2000

//Set how many images to show at once (must be less than total # of images above):
var slidestoreveal=5

//Specify code to insert between each slide (ie: "<br>" to insert a line break and create a vertical layout)
//"" for none (or horizontal):
var slideseparater=""

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width:
var imgborderwidth=2

//Set opacity value of each image when it's "dimmed", and when it's not, respectively (1=100% opaque/normal).
//Change 0.2 to 0 to completely hide image when it's dimmed:
var opacityvalues=[0.2,1]

///No need to edit beyond here///////////

function processimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

var curslide=1 //var to track current slide (total: slidestoreveal)
var curimgindex=0 //var to track current image (total: seqslides.length)
var isfirstcycle=1 //boolean to indicate whether this is the first cycle

if (document.getElementById){
for (i=0;i<slidestoreveal;i++)
document.write('<span id="seqslide'+i+'" class="seqslidestyle">'+processimgcode(seqslides[i])+'</span>'+slideseparater)
curimgindex=slidestoreveal
illuminateslide(0,opacityvalues[1])
}

function illuminateslide(slideindex, amt){
var slideobj=document.getElementById("seqslide"+slideindex).getElementsByTagName("IMG")[0]
if (slideobj.filters)
slideobj.filters.alpha.opacity=amt*100
else if (slideobj.style.MozOpacity)
slideobj.style.MozOpacity=amt
}






function displayit(){
if (curslide<slidestoreveal){
if (!isfirstcycle)
changeimage(curslide)
illuminateslide(curslide, opacityvalues[1])
curslide++
}
else{
isfirstcycle=0
for (i=0;i<slidestoreveal;i++)
illuminateslide(i, opacityvalues[0])
changeimage(0)
illuminateslide(0, opacityvalues[1])
curslide=1
}
}

function changeimage(slideindex){
document.getElementById("seqslide"+slideindex).innerHTML=processimgcode(seqslides[curimgindex])
curimgindex++
if (curimgindex>=seqslides.length)
curimgindex=0
}

if (document.getElementById)
setInterval("displayit()",slidedelay)


</script>

[vwphillips]

easiest to start again

<!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>
<style type="text/css">
/*<![CDATA[*/
#slideshow {

}

#slideshow IMG {
 width:100px;height:80px;margin-Left:10px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
var seqslides=new Array()
//Set Path to Image plus optional URL ("" for no URL):
seqslides[0]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/jam522pic1.jpg",""];
seqslides[1]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic9.jpg",""];
seqslides[2]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/jam522pic3.jpg",""];
seqslides[3]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/jam626pic3.jpg",""];
seqslides[4]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/jam522pic2.jpg",""];
seqslides[5]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/jam626pic1.jpg",""];
seqslides[6]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/jam522pic6.jpg",""];
seqslides[7]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/jam522pic4.jpg",""];
seqslides[8]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/jam626pic4.jpg",""];
seqslides[9]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic7.jpg",""];
seqslides[10]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic8.jpg",""];
seqslides[11]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/soulgenpic1.jpg",""];
seqslides[12]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic23.jpg",""];
seqslides[13]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/soulgenpic7.jpg",""];
seqslides[14]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/nicbpic2.jpg",""];
seqslides[15]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/soulgenpic4.jpg",""];
seqslides[16]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/soulgenpic5.jpg",""];
seqslides[17]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/nicbpic1.jpg",""];
seqslides[18]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/funpic1.jpg",""];
seqslides[19]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/nicbpic3.jpg",""];
seqslides[20]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic2.jpg",""];
seqslides[21]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic3.jpg",""];
seqslides[22]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic4.jpg",""];
seqslides[23]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic25.jpg",""];
seqslides[24]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic22.jpg",""];
seqslides[25]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic5.jpg",""];
seqslides[26]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic6.jpg",""];
seqslides[27]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic10.jpg",""];
seqslides[28]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic24.jpg",""];
seqslides[29]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic12.jpg",""];
seqslides[30]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic14.jpg",""];
seqslides[31]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic15.jpg",""];
seqslides[32]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/hal2007pic19.jpg",""];
seqslides[33]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/jam522pic5.jpg",""];
seqslides[34]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/joshpowers2007pic1.jpg",""];
seqslides[35]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/joshpowers2007pic6.jpg",""];
seqslides[36]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/joshpowers2007pic5.jpg",""];
seqslides[37]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/joshpowers2007pic7.jpg",""];
seqslides[38]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/joshpowers2007pic4.jpg",""];
seqslides[39]=["http://livingstonesconnect.com/lsm/media/blogs/lsministries/joshpowers2007pic9.jpg",""];


function zxcMFSS(o){
 var obj=document.getElementById(o.ID);
 this.ary=o.ImageArray;
 for (var img,z0=0;z0<this.ary.length;z0++){
  img=this.ary[z0][0];
  this.ary[z0][0]=new Image();
  this.ary[z0][0].src=img;
 }
 if (o.RandomImages){
  this.ary.shuffle();
 }
 this.opacity=o.Opacity||100;
 this.imgs=[];
 this.imgnus=[];
 for (var z1=0;z1<o.Images;z1++){
  this.imgnus[z1]=z1;
  this.imgs[z1]=document.createElement('IMG');
  this.imgs[z1].src=this.ary[z1][0].src;
  zxcOpacity(this.imgs[z1],this.opacity);
  obj.appendChild(this.imgs[z1]);
 }
 this.random=o.RandomFrames;
 this.imgcnt=o.Images;
 this.framecnt=0;
 if (this.random){
  this.imgnus.shuffle();
 }
 this.ms=o.Speed||1000;
 this.Rotate();
}

zxcMFSS.prototype.Rotate=function(){
 var oop=this;
 if (this.framecnt==this.imgs.length){
  this.to=setTimeout(function(){ oop.ReSrt(); },this.ms);
  return;
 }
 this.imgs[this.imgnus[this.framecnt]].src=this.ary[this.imgcnt][0].src;
 zxcOpacity(this.imgs[this.imgnus[this.framecnt]],100);
 this.imgcnt=++this.imgcnt%this.ary.length;
 this.framecnt++;
 this.to=setTimeout(function(){ oop.Rotate(); },this.ms);
}

zxcMFSS.prototype.ReSrt=function(){
  var oop=this;
  this.framecnt=0;
  if (this.random){
   this.imgnus.shuffle();
  }
  for (var z0=0;z0<this.imgs.length;z0++){
   zxcOpacity(this.imgs[z0],this.opacity);
  }
  this.to=setTimeout(function(){ oop.Rotate(); },this.ms);
}

Array.prototype.shuffle=function(){
 for (var r,t,z0=0;z0<this.length;z0++){
  r=Math.floor(Math.random()*this.length);
  t=this[z0];
  this[z0]=this[r];
  this[r]=t;
 }
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}



/*]]>*/
</script></head>

<body>
<div id="slideshow">
</div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
new zxcMFSS({
 ID:'slideshow',
 Images:5,
 ImageArray:seqslides,
 Speed:1000,
 RandomImages:true,
 RandomFrames:true,
 Opacity:50
});
/*]]>*/
</script></body>

</html>

I can add additional features if required

[Neil]

Vic
Many thanks for the 're-write' of the multiframe slideshow, the cross browser opacity is most excellent, not to mention the options to randomise frames and pics.
I just couldn't do it.

As an additional feature is it possible to keep one picture non opaque at the end of a sequence rather than them all dimming before the sequence runs again? To give the impression of a continuous flow.