Add a Slide Show on a SharePoint Site

Using JavaScript, HTML and the

Content Editor Web Part

Jennifer Lewis
Add a Slide Show on a SharePoint Site using JavaScript, HTML and the Content Editor Web Part
Page 2 of 13

Overview
While the SharePoint OOTB web parts for displaying images (ex: the Image Web Part and the
This Week in Pictures Web Part) are nice, the functionality of the web parts are very limited.
Particularly, the OOTB web parts do not have the true “slide show” capabilities 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. This document will demonstrate how to put a cross-face fading slide show on your
SharePoint site.

Requirements
• Authorization to edit pages on a SharePoint site
• Knowledge of JavaScript and HTML

Before You Begin

• For the best look and feel, make sure the pictures are the same size.
• Make sure you know the location of where the pictures will be stored. In this illustration,
the pictures that will be used in the slide show will be stored in the Images library on the
SharePoint site, which is rendered as the /PublishingImages directory on the site.
• The JavaScript demonstrated in this document will perform a cross-fade action when the
pictures change in the slide show in Internet Explorer. However, it will not perform a
cross-fade action on other browsers (such as Firefox). Rather, it will just change the
image.

Instructions
1. Go to your SharePoint site. Go to the page where the slide show will appear if the slide
show will not be appearing on the “home” page.

Date Written: 24 March 2009

Add a Slide Show on a SharePoint Site using JavaScript, HTML and the Content Editor Web Part
Page 3 of 13

2. Determine where on the page the slide show will go. In this illustration, the slide show
will be going on the right hand side of the page.
3. Select Site Actions – Edit Page

4. In the area where you will be adding the slide show, click Add a Web Part

Date Written: 24 March 2009

Add a Slide Show on a SharePoint Site using JavaScript, HTML and the Content Editor Web Part
Page 4 of 13

5. Scroll to the Miscellaneous section and select Content Editor Web Part.

Date Written: 24 March 2009

Add a Slide Show on a SharePoint Site using JavaScript, HTML and the Content Editor Web Part
Page 5 of 13

6. Click the Add button

7. Click the open the tool pane link.

Date Written: 24 March 2009

Add a Slide Show on a SharePoint Site using JavaScript, HTML and the Content Editor Web Part
Page 6 of 13

8. Click the Source Editor button

9. Add the JavaScript in the Text Entry dialog box.

Date Written: 24 March 2009

Add a Slide Show on a SharePoint Site using JavaScript, HTML and the Content Editor Web Part
Page 7 of 13

If you have coded slide shows on web pages using JavaScript, the concept is not much
different. However, you will need to do a few minor modifications for SharePoint.
• You will need to add an <img> element after the script declaration.
• You will need to add the following statement in your <script> block:
_spBodyOnLoadFunctionNames.push(“functionname”);, where functionname is
the name of the function. This sets up the page to run the script as soon as the
page is loaded.

The first thing to do is write the code. Start with the <script> tag.
<script language="javascript" type="text/javascript">

On the next few lines, declare the slide show configuration variables.
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)

var crossFadeDuration = 3

// Specify the image files

var Pic = new Array()

// Set up the pictures.

Pic[0] = ‘pic1.gif’
Pic[1] = 'pic2.gif'
Pic[2] = 'pic3.gif'
Pic[3] = 'pic4.gif'
Pic[4] = 'pic5.gif'

Date Written: 24 March 2009

Add a Slide Show on a SharePoint Site using JavaScript, HTML and the Content Editor Web Part
Page 8 of 13

var t
var j = 0
var p = Pic.length

var preLoad = new Array()

for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

Now, code the function that will run the slide show.
// The function to do the "slide show"
function runSlideShow()
{
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"

document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDu
ration)"
document.images.SlideShow.filters.blendTrans.Apply()
}

document.images.SlideShow.src = preLoad[j].src

if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}

j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)

Add the _spBodyOnLoadFunctionNames call to add an onload() event to the page’s body
tag.
// Add the following line to get the JS to run
_spBodyOnLoadFunctionNames.push("runSlideShow"); The appendix of this
document contains the full
Close the script tag. source code that you can
</script> “copy, paste and modify”. If
you do decide to “copy,
Finally, add the <img> element. paste and modify”, you may
<!-- the Slide Show --> have to clean up the
<table border="0" cellpadding="0" cellspacing="0"> appearance of the script in
<tr> the Text Entry dialog box,
<td id="VU" height=300 width=300> such as remove the
<img src="pic1.gif" name='SlideShow' “commented dashed lines”
width=300 height=300> (//----------) from the script.
</td>
</tr>
</table>

Date Written: 24 March 2009

Add a Slide Show on a SharePoint Site using JavaScript, HTML and the Content Editor Web Part
Page 9 of 13

10. Click Save.

11. Modify the appearance of the web part, such as title display, border display and web part
size. In this illustration, the title and chrome type will change.

Date Written: 24 March 2009

Add a Slide Show on a SharePoint Site using JavaScript, HTML and the Content Editor Web Part
Page 10 of 13

12. If you are satisfied with the changes, click OK.

13. Click the Edit Exit Mode link

14. Voila! You have a slide show.

Date Written: 24 March 2009

Add a Slide Show on a SharePoint Site using JavaScript, HTML and the Content Editor Web Part
Page 11 of 13

Date Written: 24 March 2009

Add a Slide Show on a SharePoint Site using JavaScript, HTML and the Content Editor Web Part
Page 12 of 13

Appendix: The Source Code for the Slide Show

The original scripts came from codelifter.com
(http://www.codelifter.com/main/javascript/slideshow2.html)
I modified the script for SharePoint.

<script language="javascript" type="text/javascript">

//--------------------------------------------------------------
// Set slideShowSpeed (milliseconds)
// You can keep this value (5 seconds) or you
// can change to your specification
//--------------------------------------------------------------
var slideShowSpeed = 5000

//--------------------------------------------------------------
// Duration of crossfade (seconds)
// You can keep this value (3 seconds) or you
// can change to your specification
//--------------------------------------------------------------
var crossFadeDuration = 3

// Specify the image files

var Pic = new Array()

//----------------------------------------------------------------
// Set up the pictures.
// To add more images, just continue the pattern, adding to the
// array below.
// Be sure you substitute the ‘picx.gif’ references with the
// correct reference to your image files.
// You can reference any image type you like (png, jpg, gif)
//----------------------------------------------------------------
Pic[0] = ‘pic1.gif’
Pic[1] = 'pic2.gif'
Pic[2] = 'pic3.gif'
Pic[3] = 'pic4.gif'
Pic[4] = 'pic5.gif'

var t
var j = 0
var p = Pic.length

var preLoad = new Array()

for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

//------------------------------------------------------------------
// The function to do the "slide show"
//------------------------------------------------------------------
function runSlideShow()
{
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"

Date Written: 24 March 2009

Add a Slide Show on a SharePoint Site using JavaScript, HTML and the Content Editor Web Part
Page 13 of 13

document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDu
ration)"
document.images.SlideShow.filters.blendTrans.Apply()
}

document.images.SlideShow.src = preLoad[j].src

if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}

j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)

// Add the following line to get the JS to run

_spBodyOnLoadFunctionNames.push("runSlideShow");

</script>

<!-- the Slide Show -->

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=300 width=300>
<img src="pic1.gif" name='SlideShow' width=300 height=300>
</td>
</tr>
</table>

Date Written: 24 March 2009