Create an Image Rotator in SharePoint Using jQuery

Forget about workflow, data view web parts, records management, SP 2010, and all that good stuff. These days, the only thing anyone wants to do with SharePoint is to create an image rotator. This article explains how create one in SharePoint.

Getting Started

To create an image rotator, you need the following:

* Some images
* Access to a SharePoint environment
* An image library in your environment
• Post a comment
• Email Article
• Print Article
• Share Articles
  • Digg
  • del.icio.us
  • Newsvine
  • Facebook
  • Google
  • LinkedIn
  • MySpace
  • Reddit
  • Slashdot
  • StumbleUpon
  • Technorati
  • Twitter
  • Windows Live
  • YahooBuzz
  • FriendFeed
* Enough privileges to add a content editor web part to a page

This article uses some cute cat pictures to illustrate the point. You can find a variety of them here: http://www.bing.com/images/search?q=cat+pictures&FORM=IGRE#. Find three adorable cat pictures and upload them to the image library in your site. For the purposes of this short article, name them following this convention: cat01.jpg, cat02.jpg, cat03.jpg.

The key bit is the 01, 02 and 03. You can use .bmp, .png or .gif extensions. They key (for this article) is to be consistent in your naming. Later, we'll examine how you can add an arbitrary number of cat images to your image library and rotate through all of them.

Build the Cat Rotator

We'll use jQuery in a content editor web part to create the rotator. We do this by adding a content editor web part (CEWP) to our web site and inserting some JavaScript to do the heavy lifting. The basic idea is as follows:

* Add JavaScript to the CEWP via the "Modify Source" option on the web part.
* Insert the JavaScript necessary to reference the jQuery library from Microsoft's content delivery network (CDN).
* Insert the JavaScript that uses jQuery to swap images every few seconds.
* Insert the original image, taking care to name it via the ID attribute.

The completed JavaScript looks like the following:

<!-- SECTION 1.0: Initial cat image and image placeholder -->
<div id='catPicturesID'>
  <img id="CatImage" src="/jQuery/Cat%20Pictures/cat01.jpg">
</div>

<!-- SECTION 2.0: Content Delivery Network (CDN) -->
<script src="https://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 

<!-- SECTION 3.0: Core Rotator Functionality -->
<script type="text/javascript">

  var i = 2; // Start with the 2nd image since the first one is already displayed

  <!-- SECTION 3.1: Heavy lifting -->
  function RotateCat ()
  {
	
    if (i == 4) i = 1; // Loop back to the first image.
	  
    $("#CatImage").attr("src","/jQuery/Cat%20Pictures/cat0" + i + ".jpg"); 

    i++;

  } // function RotateCat()

  <!-- SECTION 3.2: Timer -->
  $(function() {
    setInterval('RotateCat()',3000);
  });

</script>

Let's examine this section by section.

SECTION 1.0: Initial Image

This sets up an img tag with an ID, "CatImage" as well as our intial cat image, "cat01.jpg". Replace "/jQuery/Cat%20Pictures" with the path to cat01 in your environment.

SECTION 2.0: Content Delivery Network

Consider the first line of code:

<script src="https://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

This magic accesses version 1.3.2 of the jQuery library directly from Microsoft's content delivery network and makes it available to you. Learn more about the idea of a content delivery network from this link: http://www.asp.net/ajaxlibrary/cdn.ashx

The bottom line is that this makes the jQuery library available to you in an optimal fashion.

SECTION 3.0: Core Rotator Functionality

This section is where we define our variable, "i" to keep track of our cat index. We initialize it to the value "2" as this will be the next image we display. Image #1 was already displayed by way of SECTION 1 above.

SECTION 3.1: Heavy Lifting

The interesting stuff happens here.

  function RotateCat ()
  {
	
    if (i == 4) i = 1; // Loop back to the first image.
	  
    $("#CatImage").attr("src","/jQuery/Cat%20Pictures/cat0" + i + ".jpg"); 

    i++;

  } // function RotateCat()

We have three cat images. We're using our trusty variable "i" to index to the right image. If i = 4 then we want to loop back to the first image. This is the golden line of code, however:

$("#CatImage").attr("src","/jQuery/Cat%20Pictures/cat0" + i + ".jpg"); 

This invoke some jQuery functions to change the src attribute on an HTML tag whose ID = "CatImage". Specifically, we'll change the img attribute to point to a new image in our cat library based on the value of our cat index variable. It's that simple.

SECTION 3.2: Timer

All that remains is to get or image rotator to run on a schedule. Do that with this bit of JavaScript:

  <!-- SECTION 3.2: Timer -->
  $(function() {
    setInterval('RotateCat()',3000);
  });

The above is saying, "every 3,000 milliseconds, run a javacript function called 'RotateCat()'."

Extending the Solution

This article describes how to create an image rotator but it has one fairly significant restraint. It assumes a fixed number of images following a strict naming convention. It would be much better if we could point our JavaScript to an image library and rotate through all of the images in the library. Doing that is a bit beyond the scope of this tip, but rest assured, it's possible. Look for a future article to explain how.

jQuery isn't required to implement this solution, but it sure makes it easy. It's hard to beat the simplicity of this line of code:

    $("#CatImage").attr("src","/jQuery/Cat%20Pictures/cat0" + i + ".jpg"); 

That one line represents dozens of painstaking plain-old JavaScript code lines, especially since jQuery is works across all major browsers.

Once you get the hang of it, it can take literally minutes to set up your own image rotator. You can have multiple rotators on the same page or across sites. Now there's nothing in your way to dazzle your end user community with an image rotator.