Blending Image Slideshow - error in IE7

[HansHenrik]

Hey.
I'm new to this forum, and a totally javascript n00b.

My "problem" is: when I run a script in Firefox everything is A OK, but when I run it in IE7.... it runs, but tells me there's an error. It's something with NULL or not an object.

I've borrowed the script from Dynamic Drive

I've copied the code and made it an external js file to this site:
CPH Locations

The javascript can be found here.

Why does IE give me an "Done, but with errors on page." when everything seems brilliant in the Firefox DOM inspector?

[jscheuer1]

You really should put your images on a diet by optimizing them. And, consider using less of them in each array. This will speed the loading of the page. If you set the duration=3, ex:

style="filter:blendTrans(duration=3)"

for each image tag's style, you will get a nice blending effect in IE (after you fix the next thing).

But, the real problem is that you are running the script four times and each of these times is before the browser has parsed at least one of image elements to which it refers during the blend initialization phase in IE. FF doesn't initialize for blend so, that explains why it has no error. All you really need to do is get rid of all of these:

<script type="text/javascript" src="js/imageblend.js"></script>

except one and put that one after the last image element:

<a href="javascript:gotoshow(slideimages4[whichlink4])"><img src="img/locations/127.jpg" alt="" name="slide4" border=0 style="filter:blendTrans(duration=0)" width=175 height=130></a><script type="text/javascript" src="js/imageblend.js"></script>

[HansHenrik]

BRILLIANT!

Thank you very much for the help.

I'll have a serious talk with the site-owner about cutting down to, let's say 10% of the image amount.

Thank you.

[jscheuer1]

One other thing. If you want the slide show to work in Opera and any other browser that supports document.all and not style filters, use these:

var blenddelay=(document.images.slide.filters)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
var a = document.images.slide;
  if (!document.images) return
  if (a.filters) a.filters[0].apply()
    a.src=imageholder[whichimage].src
  if (a.filters) a.filters[0].play()
    whichlink=whichimage
    whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
    setTimeout("slideit()",slidespeed+blenddelay)
}

var blenddelay2=(document.images.slide2.filters)? document.images.slide2.filters[0].duration*1000 : 0
function slideit2(){
var b = document.images.slide2;
  if (!document.images) return
  if (b.filters) b.filters[0].apply()
    b.src=imageholder2[whichimage2].src
  if (b.filters) b.filters[0].play()
    whichlink2=whichimage2
    whichimage2=(whichimage2<slideimages2.length-1)? whichimage2+1 : 0
    setTimeout("slideit2()",slidespeed+blenddelay2)
}

var blenddelay3=(document.images.slide3.filters)? document.images.slide3.filters[0].duration*1000 : 0
function slideit3(){
var c = document.images.slide3;
  if (!document.images) return
  if (c.filters) c.filters[0].apply()
    c.src=imageholder3[whichimage3].src
  if (c.filters) c.filters[0].play()
    whichlink3=whichimage3
    whichimage3=(whichimage3<slideimages3.length-1)? whichimage3+1 : 0
    setTimeout("slideit3()",slidespeed+blenddelay3)
}

var blenddelay4=(document.images.slide4.filters)? document.images.slide4.filters[0].duration*1000 : 0
function slideit4(){
var d = document.images.slide4;
  if (!document.images) return
  if (d.filters) d.filters[0].apply()
    d.src=imageholder4[whichimage4].src
  if (d.filters) d.filters[0].play()
    whichlink4=whichimage4
    whichimage4=(whichimage4<slideimages4.length-1)? whichimage4+1 : 0
    setTimeout("slideit4()",slidespeed+blenddelay4)
}

instead of the ones you have and get rid of this line:

var ie=document.all

[HansHenrik]

Perfect!

Interesting with that browser detection thing, or what it was I just did