Adding a SlideShow to a SharePoint Site Redux

One of my most popular posts on this blog was a tutorial on adding a slide show to a SharePoint site using HTML, JavaScript and the Content Editor Web Part. If you haven't had a chance to view that tutorial, you can view it at this link: Add a SlideShow to the SharePoint Site using HTML, JavaScript, and the CEWP.

Just as it was one of my most popular tutorials, it was the one that seemed to cause trouble for some of the readers. Two of the most popular questions that I received were:

• Why am I only getting the first image?


• Why am I getting red X's?

I created this separate post to address troubleshooting the application.

Check Your Browser Version
Common Symptom: The first picture displays but the slide show doesn't play

To give you more information on the tutorial, I tested the tutorial on the following browsers:

• Internet Explorer 6


• Internet Explorer 7


• Firefox 3.1x


• Firefox 3.5x


• Opera 0.9x

I've noticed that in some of the browsers, the comments in the JavaScript caused it to only show the first picture only. Try removing the comments from the JavaScript.


If you're not using the browsers that I've used to test the code, test the code in a stand-alone "test" web page to see if the browser supports the JavaScript. If you do that, make sure that you comment out the _spBodyOnLoadFunctionNames.push("runSlideShow"); line. If the code is not working, it's possible that your browser will not support the JavaScript code.


Also check the user's browser settings. The browser settings may be configured to not run JavaScript. If that's the case, then the script won't run.

Check Your Code

Common Symptom: The first picture displays but the slide show doesn't play; red X's appear instead of images

When I was assisting people with the slide show, I found two common problems:

• Coders forgot to add the _spBodyOnLoadFunctionNames.push("runSlideShow"); statement before the ending </script> tag


• Coders were not referencing the correct location for the images

Make sure that the _spBodyOnLoadFunctionNames.push("runSlideShow"); line appears before the closing </script> tag.

If the _spBodyOnLoadFunctionNames.push("runSlideShow"); statement is there, check to make sure that your path to reference the pictures is exactly right (the src property in the <img> tag). If you are having trouble with using the relative path, try referencing the absolute path (ex: http://www.bogus.com/images/image.jpg). If you are still getting the red X, it's possible that the image does not exist where you are referencing.

Check to Make Sure That Other Scripts on the Page Aren't Failing

Common Symptom: The first picture displays but the slide show doesn't play

If the page on the SharePoint site is running other JavaScripts (especially JavaScript that gets added through a feature) and one of those JavaScripts fail before the page gets a chance to load the slide show script, the slide show script won't run. For example, in my environment, we have a feature that adds JavaScript to change the logo. If that JavaScript fails, the slide show stops working. If your slide show is not working, view the errors on your browser to see if there is any JavaScript that's failing.

If You Are Referencing a Document Image Library for the Images, Check to Make Sure That You Have Read Permission on the Library

Common Symptom: The script "hangs", then red Xs appear when the user stops the script from running.

One of the things that readers reported was that their script would "hang", and when the stop the "hanging", it would show a red X. If you are referencing a document library for the images, you will possibly get "hanging" if the viewer does not have read permission to the document library. Either grant the viewers of the site at least read permission to the document image library, or move the pictures to a document image library where the users have read permission.

Hopefully these techniques are helpful. If you have other ideas to help fellow readers who are having trouble with the script, please post your suggestions.