Tuesday, March 24, 2009

Add a SlideShow to the SharePoint Site using HTML, JavaScript and the CEWP

While the SharePoint OOTB web parts for displaying images are nice, the functionality of the web parts are very limited. Particularly, the OOTB web parts do not have a true "slide show" capabiilties that many end users are looking for. You can write your own custom web part to display images like a slide
show. However, this solution will not only take time and effort to do, but if you are just a “power user” for your SharePoint site, you may not have the right tools and permissions to make your own web parts. If you are familiar with JavaScript and HTML, you can add your own slide show on your site.

For a step-by-step guide that you can download: Add a Slideshow on a SharePoint Site using Javascript, HTML, and the Content Editor Web Part

Here is a video demonstrating how to add the slideshow:

UPDATE: If you are having trouble with getting this to work, see the blog post from 10/26/2009 for troubleshooting tips.


Shelley said...

Hello, I have read the article and added the coding to the content editor web part. However, when the page is still in edit mode it says "Please wait while scripts are being loaded..." Nothing happens though. When I exit edit mode, a x is displayed where the image is to be.
How can this be resolved?


Anonymous said...

I'm having the same exact problem that Shelley is having. I have the red x and the loading message. Help! I really want to get this working. It looks so awsome.

Jennifer said...

Check the following:

1) Make sure that the reference to the images are exactly right. It's just like the img tag on a web site - if the file you're referencing in the src doesn't exist, you see a red X. SharePoint is sometimes tricky with how it renders the URL. For example, pictures in the Images library actually renders as the "PublishingImages" path. The best way to test it is if you're using pictures from a SharePoint library, go to the library, open the picture, and see what URL appears in the browser.

2) If you're experiencing "loading"/hanging, it's possible that you do not have the proper permissions to use the images. Rather than tell you that you can't access them, it just "hangs", and you end up seeing the red X. For example, say I have a SharePoint site called "blah", and I want to use images that exist on SharePoint site "joeschmoe". If I don't have the proper access permissions (ex: read) to the images library on "joeschmoe", I'll have issues.

Jennifer said...

For the other readers:

If you want to provide feedback to help your fellow readers, please feel free to do so!

Anonymous said...

hey, i've followed this steps but i'm facing problem in the reference of the images, i put the right url of images (which appeared in address bar of image) & still it's not refrencing right, am i missing something? explain to me the right technique

Jennifer said...

Hi Anonymous,

The end of this post has a link to troubleshooting tips. If you can't see the link, here it is: http://mwalimuscorner.blogspot.com/2009/10/adding-slideshow-to-sharepoint-site.html

Ananth said...

For those getting the red X when using Sharepoint, sometimes the images are stored under a folder called 1 inside the picture library. Make sure you copy the picture location and then use the test link box in content editor webpart to ensure that the picture path is right.

Anonymous said...


Thank you very much for the code.
however, I need the images to appear randomly instead of any a sepcicif order. Any idead?

George Y said...

Hi, I am having some problems getting the slideshow to play. The first picture loads and if I change the path to various pictures they load but only the first one. I am observing the script in developer view and do not see any errors. Can I send my script maybe you can spot the problem?
Thanks George

abdul said...

hi jaf,

from where i may get this code?

Melody said...

Thank you. Thank you. Thank you. This worked beautifully. It took me a while to figure out that I needed the path to the picture itself for the Pic[0]... part of the programming. But it looks wonderful. Now I just need to center the pictures in the Web part. Thanks again.