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...ano ther 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 crossFadeDurati on = 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.styl e.filter="blend Trans(duration= 2)"
document.images .SlideShow.styl e.filter="blend Trans(duration= crossFadeDurati on)"
document.images .SlideShow.filt ers.blendTrans. Apply()
}
document.images .SlideShow.src = preLoad[j].src
if (document.all){
document.images .SlideShow.filt ers.blendTrans. Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('run SlideShow()', slideShowSpeed)
}
</script>
In the body:
<td id="VU" height=72 width=160><img src="slideshow/1.jpg"
name='SlideShow ' width="160" height="72"></td>
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...ano ther 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 crossFadeDurati on = 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.styl e.filter="blend Trans(duration= 2)"
document.images .SlideShow.styl e.filter="blend Trans(duration= crossFadeDurati on)"
document.images .SlideShow.filt ers.blendTrans. Apply()
}
document.images .SlideShow.src = preLoad[j].src
if (document.all){
document.images .SlideShow.filt ers.blendTrans. Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('run SlideShow()', slideShowSpeed)
}
</script>
In the body:
<td id="VU" height=72 width=160><img src="slideshow/1.jpg"
name='SlideShow ' width="160" height="72"></td>
Comment