Add a Slide Show on a Share Point Site Using Javascript, HTML and Content Editor Web Part

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

Date Written: 24 March 2009

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.



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



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



6. Click the Add button 7. Click the open the tool pane link.



8. Click the Source Editor button

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



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'



The appendix of this document contains the full source code that you can “copy, paste and modify”. If you do decide to “copy, paste and modify”, you may have to clean up the appearance of the script in the Text Entry dialog box, such as remove the “commented dashed lines” (//----------) from the script.

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=crossFadeDuration)" 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");

Close the script tag.

</script> Finally, add the <img> element.

 <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>



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.



12. If you are satisfied with the changes, click OK. 13. Click the Edit Exit Mode link

14. Voila! You have a slide show.





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)"



document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)" 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>  <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>

Documents

Add a Slide Show on a Share Point Site Using Javascript, HTML and Content Editor Web Part