Fade-in Slideshow: randomizing image sequence

[keychain]

Howdy, all. I got some great help last month with tweaking the Blending Images script. My new quest involves the Fade-in Slideshow.

Quite simply, I'm looking for coding that will randomize the series of images. I've got an array that includes more than 40 slides, and it would be cool if users don't have to see the same old sequence every time they visit the site.

Thanks for any help you guys can provide!

Best,
keychain

[cr3ative]

I believe that I have it working as you wish:

edit: I put my coding hat on, and now it's all working and automated fully. Just edit the image array as you would use the normal script.

<script language="JavaScript1.2" type="text/javascript">

/***********************************************
* Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by cr3ative December 2004 to show images in random order
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var slideshow_width='140px' //SET IMAGE WIDTH
var slideshow_height='225px' //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="photo1.jpg"
fadeimages[1]="photo2.jpg"
fadeimages[2]="photo3.jpg"

////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/101
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=Math.floor(Math.random() * fadeimages.length)
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=Math.floor(Math.random() * fadeimages.length)
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/101
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

Hope this works and Merry Christmas
cr3ative

[keychain]

Hey, thanks so much.

Seems to be working great, but for one little issue: The first two slides are always the same. (They are, in fact, images [0] and [1] in my array.) After that, randomness kicks in.

Any idea what might be causing that?

keychain

[simonf]

HI

I would guess the timing of the picture downloads, i.e the random show starts with the first pic, selects the next pic and has to redue as its waiting for more pictures. Check the size of your images, try keep them small to start off the random show more randomly.

rgds,Simonf

[keychain]

SimonF,

I'm not sure what you mean. My images are tiny as it is, but I'm not sure anyway how their size would affect the randomness, which is dictated by a set of mathematical instructions.

Other slideshows have been successfully randomized without this issue. So I suspect it's something in the coding -- not in the size of my images.

The updated script from cr3ative works great otherwise.

keychain

[cr3ative]

Yes, I noticed this as well. If it's too much of an issue, I can probably correct it (stop all instances of order=+1).

Merry Christmas
cr3ative

[cr3ative]

Ok, this is untested code (as I'm not on my own computer), but I think it'll solve the issue:

Change:
var curimageindex=0
var nextimageindex=1

To:
var curimageindex=Math.floor(Math.random() * fadeimages.length)
var nextimageindex=Math.floor(Math.random() * fadeimages.length)

See if that works.
Merry Christmas,
cr3ative

[keychain]

Thanks velly much! As always, your help is greatly appreciated.

keychain

[the_alpine]

So I've tried to use this script with mixed image types (jpegs and gifs with transparent areas), but to no avail. Whenever a gif is displayed it is either displayed behind or on top of another image so I see 2 images at the same time. The gifs are horizontal format and have transparent areas directly above and below for aligning purposes. Any ideas?

[ddadmin]

So I've tried to use this script with mixed image types (jpegs and gifs with transparent areas), but to no avail. Whenever a gif is displayed it is either displayed behind or on top of another image so I see 2 images at the same time. The gifs are horizontal format and have transparent areas directly above and below for aligning purposes. Any ideas?

Fade-In slideshow was updated Dec 30th, 04' to handle displaying images of varying dimensions better. Specifically, the script now will hide the 2nd image beneath the currently displayed that's waiting in queue to be shown until just before the fading transition occurs. That's as good as it gets, as the 2nd image needs to be made visible just before the fading transition takes place in order for the fading effect to appear correct. But if you're using a version of this script downloaded before Dec 30th, 04', definitely use the updated version.