Opera Hates my Slideshow Script...

[starlameris]

...And I haven't got the slightest idea how to fix it. The code works on all the other browsers I've tested it on, but when I try it in Opera, the forward and back buttons simply don't respond.

Here's the code:

var manualPictures = new Array();
function NextImageSlide(pictureName,imageFiles)
{
// Ensure picture list primed.
if (manualPictures[pictureName] == null) {
manualPictures[pictureName] = imageFiles;
} else {
imageFiles = manualPictures[pictureName];
}
var imageSeparator = imageFiles.indexOf(";");
var nextImage = imageFiles.substring(0,imageSeparator);
{
document.getElementById(pictureName).style.filter="blendTrans(duration=2)";
document.getElementById(pictureName).filters.blendTrans.Apply();
}
document.getElementById(pictureName).src = nextImage;
{
document.getElementById(pictureName).filters.blendTrans.Play();
}
manualPictures[pictureName] =
imageFiles.substring(imageSeparator+1,imageFiles.length)
+ ';' + nextImage;
}
//End Slideshow

And here's what I get when I look at the Opera JavaScript console:

Bloch Fine Custom Woodworks
file://localhost/C:/Documents%20and%20Settings/SMaulding/Desktop/site/actual/products/kitchens.html
Event thread: click
Error:
name: TypeError
message: Statement on line 16: Could not convert undefined or null to object
Backtrace:
Line 16 of inline#1 script in file://localhost/C:/Documents%20and%20Settings/SMaulding/Desktop/site/actual/products/kitchens.html
(document.getElementById(pictureName)).filters.blendTrans.Apply();
Line 1 of script
NextImageSlide("rollover", "graphics/kitchens/kitchen2.jpg;graphics/kitchens/kitchen1.jpg");
At unknown location
[statement source code not available]

Any thoughts?

[mwinter]

var manualPictures = new Array();

Associative arrays do not exist in ECMAScript. Use an object instead. This still doesn't provide an associative array, but it does provide something similar.

{
  document.getElementById(pictureName).style.filter="blendTrans(duration=2)";
  document.getElementById(pictureName).filters.blendTrans.Apply();
}

It seems that you're missing some of this code out, because block statements aren't much use in ECMAScript (unlike some other languages where they alter scope).

I expect that this is supposed to be preceeded by an if statement. If that statement involves a proper feature test, then there should be no problems. If you're trying to detect IE (and browser detection is almost always wrong), then you're probably going to run into problems.

Try subsituting your code for that below.

  manualPictures[pictureName] =
    imageFiles.substring(imageSeparator+1,imageFiles.length)
    + ';' + nextImage;

It's not necessary to pass a second argument to the substring method if you're obtaining all characters up to the end of the string.

var manualPictures = {};

function nextImageSlide(pictureName, imageFiles) {
  var imageSeparator, nextImage, picture;

  if(!manualPictures[pictureName]) {
    manualPictures[pictureName] = imageFiles;
  } else {
    imageFiles = manualPictures[pictureName];
  }

  imageSeparator = imageFiles.indexOf(";");
  nextImage      = imageFiles.substring(0, imageSeparator);

  if(document.images) {
    picture = document.images[pictureName];
  }
  if(picture) {
    if(picture.style && picture.filters) {
      picture.style.filter="blendTrans(duration=2)";
      picture.filters.blendTrans.Apply();
    }
    picture.src = nextImage;
    if(picture.filters) {
      picture.filters.blendTrans.Play();
    }
  }
  manualPictures[pictureName] = imageFiles.substring(imageSeparator + 1)
                              + ';' + nextImage;
}

As you haven't shown how this code is to be used, I can't effectively test it, so I'll leave that to you.

Hope that helps,
Mike

[Twey]

filters are, as far as I know, IE only.
Opera's complaining because you're telling it to access something that doesn't exist.

[starlameris]

mwinter: Thank you so much for the response. I substituted those 2 lines of code and now it works fine. The transition is gone in IE but that doesn't really bother me, so long as all the images can be seen.

I'm sorry I couldn't post the context, but it's a company site and we don't yet have webspace to upload anything to. You managed to help anyway.

filters are, as far as I know, IE only.
Opera's complaining because you're telling it to access something that doesn't exist.

Yes, but in all other browsers (except Opera apparently) it typically just ignores the filters, so you can maintain a fancy transition in IE and all have the script still function fine in other browsers, just not as prettily as in IE. Oh well. No more pretty transition.

[mwinter]

The transition is gone in IE but that doesn't really bother me, so long as all the images can be seen.

It shouldn't have. I still get one.

[...] in all other browsers (except Opera apparently) it typically just ignores the filters [...]

You must have been doing something to get them to bypass those assignment expression, otherwise they would error-out, too. What was it?

Mike

[starlameris]

You must have been doing something to get them to bypass those assignment expression, otherwise they would error-out, too. What was it?

Ha! I wish I knew. It's actually a modified version of someone else's script. I'm more of a designer than a coder and my javascript is so rusty it's pathetic. I'm kind of reteaching myself as I do this site. If I figure out what exactly makes them bypass it, I'll post it.

-Stephanie