Add randomizing function to fade-effect slideshow?

[Susanna]

Hi all,

I'm using the following slideshow script that I found on the web to
display changing images with a crossfade effect. Eventually I will be
adding many more images to the slideshow. The thing is, I ALSO have
to make it so the images will load randomly. I have looked at a
number of scripts for random-loading slideshows, but I have to find a
way to COMBINE this fading-image script (or, a different fading-image
script, if necessary) with a randomizing function. I haven't been
able to find a script online that does both. Unfortunately I don't
know how to code Javascript by hand and I haven't had any success
trying to hack this script myself to add the randomizing element. I
imagine that there is probably a fairly simple way to do it by adding
a line or two of code, but I don't know how to make it work...if
anyone can enlighten me, I'd be oh, so grateful.

Also, by the way: this crossfade slideshow only shows the fade effect
on PC's. Does anyone know of a script that makes this effect work on
the Mac too? (Also, on a Mac, this script does allow the images to
change, with no fade effect, BUT it is quite buggy and sometimes the
images start flashing around strangely...another problem. Any
ideas...?)

Thanks--
Susanna

Code:
In the header:

<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 7000

// Duration of crossfade (seconds)
var crossFadeDuration = 4

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'slideshow/1.jpg'
Pic[1] = 'slideshow/2.jpg'
Pic[2] = 'slideshow/3.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans (duration=2)"
document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply ()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play( )
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>

In the body:

<td id="VU" height=72 width=160><img src="slideshow/1.jpg"
name='SlideShow' width="160" height="72"></td>

[McKirahan]

"Susanna" <we*********@ciis.edu> wrote in message
news:4b**************************@posting.google.c om...

Hi all,

I'm using the following slideshow script that I found on the web to
display changing images with a crossfade effect. Eventually I will be
adding many more images to the slideshow. The thing is, I ALSO have
to make it so the images will load randomly. I have looked at a
number of scripts for random-loading slideshows, but I have to find a
way to COMBINE this fading-image script (or, a different fading-image
script, if necessary) with a randomizing function. I haven't been
able to find a script online that does both. Unfortunately I don't
know how to code Javascript by hand and I haven't had any success
trying to hack this script myself to add the randomizing element. I
imagine that there is probably a fairly simple way to do it by adding
a line or two of code, but I don't know how to make it work...if
anyone can enlighten me, I'd be oh, so grateful.

Also, by the way: this crossfade slideshow only shows the fade effect
on PC's. Does anyone know of a script that makes this effect work on
the Mac too? (Also, on a Mac, this script does allow the images to
change, with no fade effect, BUT it is quite buggy and sometimes the
images start flashing around strangely...another problem. Any
ideas...?)

Thanks--
Susanna

Code:
In the header:

<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 7000

// Duration of crossfade (seconds)
var crossFadeDuration = 4

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'slideshow/1.jpg'
Pic[1] = 'slideshow/2.jpg'
Pic[2] = 'slideshow/3.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans (duration=2)"
document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuratio
n)" document.images.SlideShow.filters.blendTrans.Apply ()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play( )
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>

In the body:

<td id="VU" height=72 width=160><img src="slideshow/1.jpg"
name='SlideShow' width="160" height="72"></td>

Okay, here's an *ugly* solution -- I'm sure others will let me know just how
ugly.
Add the following above the comment "// do not edit anything below this
line":

// Populate rand() array
var pics = new Array(Pic.length);
var rand = new Array(Pic.length);
do {
for (var i=0; i<Pic.length; i++) {
var seed = parseInt(Math.random()*1000)%Pic.length;
if (rand[i] == null) {
if (pics[seed] == null) {
rand[i] = seed;
pics[seed] = i;
}
}
}
}
while (rand.join("").length < Pic.length);
And change one line below the comment "// do not edit anything below this
line":
preLoad[i].src = Pic[i]
becomes:
preLoad[i].src = Pic[rand[i]]
Note that with your code the first image displayed will always be
"slideshow/1.jpg".

Watch for word-wrap.

[Dr John Stockton]

JRS: In article <c4rEb.597098$Fm2.545352@attbi_s04>, seen in
news:comp.lang.javascript, McKirahan <Ne**@McKirahan.com> posted at Thu,
18 Dec 2003 23:51:36 :-

var seed = parseInt(Math.random()*1000)%Pic.length;

No point in converting to a string and back; and you may have the wrong
result range; read the newsgroup FAQ, 4.22.

BTW, that is a case when parseInt does not need a second parameter. If
parseInt does not need a second parameter, then it is *probably* not
necessary to use parseInt.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.