Click to See Complete Forum and Search --> : Fading Slide show


clysley81
08-21-2003, 07:15 AM
Hi

This piece of Javascript is a Fading slide show for images. Is there any way of modifying the code so it shows text instead of images and that the images or text appear randomly? Is there better JS code out there that can do this job?

Thanks

Chris




<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: CodeLifter.com (support@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.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);
}
// End -->
</script>

</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->

<BODY onLoad="runSlideShow()">

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150>
</td>
</tr>
</table>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 2.13 KB -->

dennic
08-23-2003, 03:49 AM
if your using photoshop, you can create a new file and insert the text you want in there and then save it as a jpg file or gif.

David Harrison
08-23-2003, 04:11 PM
I modified the script above to allow you to use text for fading in/out. It works in Internet Explorer 6, it shows the text in Netscape 7.02 but doesn't fade it, and it doesn't show anything in Opera 7.