Multiframe slideshow need help to randomize images please

[nemetzger]

Using this script here: http://livingstonesconnect.com/lsm/index.php/2010/06/25/welcome

1) Script Title: Multiframe Image Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/multiframeslide.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.