Trouble getting a Javascript to wrok

[calenna]

Here's the script. Its a basic slide show.

 
<script>
 var speed = 3000;
 var fadeDur = 1;
 var Pics = new Array();
 Pics[0] = 'images/2009/crazyhair1.jpg';
 Pics[1] = 'images/2009/crazyhair2.jpg';
 Pics[2] = 'images/2009/crazyhair3.jpg';
 Pics[3] = 'images/2009/crazyhair4.jpg';
 Pics[4] = 'images/2009/mealtime.jpg';
 Pics[5] = 'images/2009/l&l1.jpg';
 Pics[6] = 'images/2009/l&l2.jpg';
 Pics[7] = 'images/2009/missednap.jpg';
 Pics[8] = 'images/2009/logan&dad.jpg';
 Pics[9] = 'images/2009/reading.jpg';
 Pics[10] = 'images/2009/logancloseup.jpg';
 Pics[11] = 'images/2009/hiking1.jpg';
 Pics[12] = 'images/2009/hiking2.jpg';
 Pics[13] = 'images/2009/hiking3.jpg';
 Pics[14] = 'images/2009/hiking4.jpg';
 Pics[15] = 'images/2009/hiking5.jpg'; 
 var timeout;
 var image = 0;
 var length = Pics.length;
 var preLoad = new Array();
 for (i = 0; i < length; i++)
 {
     preLoad[i] = new Image();
     preLoad[i].src = Pics[i];
 }
 function runShow()
 {
     if (document.all)
  {
         document.images.SlideShow.style.filter="blendTrans(duration=2)";
        document.images.SlideShow.style.filter="blendTrans(duration=fadeDur)";
         document.images.SlideShow.filters.blendTrans.Apply();      
     }
     document.images.SlideShow.src = preLoad[image].src;
     if (document.all)
  {
         document.images.SlideShow.filters.blendTrans.Play();
     }
     image = image + 1;
     if (image > (length-1)) 
  {
   image=0;
  }
     timeout = setTimeout('runShow()', speed);
 }
 function stopShow()
 {
  clearTimeout(timeout);
 }
 function slideshowNext()
 {
  stopShow();
  image=image+1;
  if (image > (length-1))
  {
   image=0;
  }
  if (document.all)
  {
         document.images.SlideShow.style.filter="blendTrans(duration=2)";
        document.images.SlideShow.style.filter="blendTrans(duration=fadeDur)";
         document.images.SlideShow.filters.blendTrans.Apply();      
     }
  document.images.SlideShow.src = preLoad[image].src;
  if (document.all)
  {
         document.images.SlideShow.filters.blendTrans.Play();
     }
 }
 function slideshowBack()
 {
  stopShow();
  image=image-1;
  if (image<0)
  {
   image=(length-1);
  }
  if (document.all)
  {
         document.images.SlideShow.style.filter="blendTrans(duration=2)";
        document.images.SlideShow.style.filter="blendTrans(duration=fadeDur)";
         document.images.SlideShow.filters.blendTrans.Apply();      
     }
  document.images.SlideShow.src = preLoad[image].src;
  if (document.all)
  {
         document.images.SlideShow.filters.blendTrans.Play();
     }
 }
</script>

In the body tag I have

onload="runShow()"

And here's where everything else is being called:

<tr>
       <td id="imagearea">
        <img src="images/2009/crazyhair1.jpg" name='SlideShow' width=540 height=375>
       </td>
      </tr>
      <tr>
       <td><center><a href="javascript:slideshowBack()"><img src="images/backar.gif"></a>
        <a href="javascript:stopShow()"><img src="images/pause.gif"></a>
        <a href="javascript:runShow()"><img src="images/play.gif"></a>
        <a href="javascript:slideshowNext()"> <img src="images/nextar.gif"></a>
           </center>
       </td>
      </tr>

This works fine when the files are on my computer but won't run after being uploaded to the server. It displays a blank space where the images shold be. The controls show up but don't do anything. Firebug doesn't throw any errors. I'm stumped.

[xav0989]

If it works on your computer but not on the server, my first guess is that the image files are not where they are supposed to be. Check their location on the server to make sure.

Could you also provide a link to the page, as this would help us diagnose the problem.

[calenna]

Thanks for the suggestions.
I double checked the image files and they are wehre they are supposed to be.
The page is at: http://www.calennadesigns.exofire.net/2009.html

[misson]

You're having the same problem rhyeen just had. Your image files have a '.JPG' extension but you refer to them with a '.jpg' extension. In general, URIs are case sensitive. The solutions are simple.

• Rename the files to have a lowercase extension.
• Add 'Options +MultiViews' to your site .htaccess and don't include file extensions in URIs (e.g.

  var pics = [
     "/images/2009/crazyhair1",
     "/images/2009/crazyhair2",
    ...
  ];

I recommend doing both.

Preloading all those images will be terrible for site performance. It's better to just preload the next and previous images. Something like:

var slide = {
  images: {
    prev: new Image(),
    curr: document.images.SlideShow,
    next: new Image()
  }
};
function loadSlide(i) {
   slide.images.curr.src = pics[i];
   slide.images.next.src = pics[(i+1) % pics.length];   
   slide.images.prev.src = pics[i ? i : pics.length-1];
}

Call loadSlide(...) from slideNext.

     if (document.all)
  {
         document.images.SlideShow.style.filter="blendTrans(duration=2)";
        document.images.SlideShow.style.filter="blendTrans(duration=fadeDur)";
         document.images.SlideShow.filters.blendTrans.Apply();      
     }

You shouldn't need to keep setting SlideShow's filter, and you especially don't need to set it twice in a row. You may need to call 'SlideShow.filters.blendTrans.Apply()'; I don't make much use of IE's filters, other than for PNG transparency in IE6.

[calenna]

thank you. That was the problem. I am an idiot. :happysad: Normally I do remember to check my file extensions. Also, thank you for the suggestions on making the script more efficient. Its still a work in progress.

[nikolic4]

Its still a work in progress.

You can place images into BLOB data type, that way when you do cascade delete you dont have to manualy delete images. Hope this helps :)