[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1160
  • Last Modified:

slideshow javascript - fade not working in chrome

the following slideshow works in all browsers as far as switching images,
but it is supposed to have a fade from image to image.

it works in IE8, but not Chrome, Safari, Opera, FireFox

anyone know how to fix that?

thanks

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slideshow</title>

<SCRIPT LANGUAGE="JavaScript">
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 7000;
// Duration of crossfade (seconds)
var crossFadeDuration = 5000;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'gallery/test1.jpeg'
Pic[1] = 'gallery/test2.jpeg'
Pic[2] = 'gallery/test3.jpeg'
Pic[3] = 'gallery/test4.jpeg'

// 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=100)";
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>

</head>

<body onLoad="runSlideShow()">

<img src="gallery/test1.jpeg" name='SlideShow'/>


</body>

</html>

Open in new window

0
webdott
Asked:
webdott
  • 2
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
As far as I can tell, 'filter' is an IE only property.  Most slideshows use jQuery to create transitions in slideshows.  A lot of people use this one: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
0
 
webdottAuthor Commented:
thanks. that works for what i need.
0
 
Dave BaldwinFixer of ProblemsCommented:
You're welcome.
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now