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

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

5.0

|Views: 14,041|Likes:
Published by Jennifer
A step-by-step guide to adding a slide show using JavaScript, HTML and the Content Editor Web Part in SharePoint.
A step-by-step guide to adding a slide show using JavaScript, HTML and the Content Editor Web Part in SharePoint.

More info:

Published by: Jennifer on Mar 25, 2009
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

05/27/2013

pdf

text

original

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 endusers 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 Pic[0] Pic[1] Pic[2] Pic[3] Pic[4] up the pictures. = ‘pic1.gif’ = 'pic2.gif' = 'pic3.gif' = 'pic4.gif' = '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 The appendix of this _spBodyOnLoadFunctionNames.push("runSlideShow"); document contains the full source code that you can Close the script tag. “copy, paste and modify”. If </script> you do decide to “copy, paste and modify”, you may Finally, add the <img> element. have to clean up the <!-- the Slide Show --> appearance of the script in <table border="0" cellpadding="0" cellspacing="0"> the Text Entry dialog box, <tr> such as remove the <td id="VU" height=300 width=300> “commented dashed lines” <img src="pic1.gif" name='SlideShow' (//----------) from the script. width=300 height=300> </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

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->