Spice up your SharePoint 2010 site by adding a little jQuery

Click here for a live demonstration of the sample accordion banner image rotator in action.

Granted, SharePoint branding is pretty hot stuff, but toss those oven mitts aside because what we’re cooking up here doesn’t require an oven.  We’ve all seen them…the sites with the super cool widgets and awesome transitions. Here, I’ll show you step-by-step how to create and implement your own accordion-style banner image rotator for your SharePoint deployment.

We'll start by creating a SharePoint Document Library to hold our banner images.  Next, we'll create a page on the SharePoint site to use for our demonstration.  Then we'll insert our code into the new page which includes references to the jQuery library, javascript to handle the automated rotation, and HTML to display the widget.

Note…this step-by-step guide assumes you’re already familiar with SharePoint 2010 and have access to a development environment with the permissions necessary to create a document library and use SharePoint Designer 2010 to create a page based on a master page.

Step 1:
Create a SharePoint Document Library named BannerImages and upload 3 image files (mine have a 300px width, 200px height).


SharePoint 2010 Document Library

Step 2:
Using SharePoint Designer 2010, create a New Page from Master named Demo (I’ve chosen the v4.master master page).

Go to File --> Add Item --> New Page from Master

SharePoint Designer - New Page from Master

Next, choose the desired Master Page and click the Create button.

SharePoint Designer - Choose Master Page

Provide a name for the file (in my case Demo) and click OK.

SharePoint Designer - New Page Dialog

Step 3:
Add the code below to your Demo.aspx page.  The first content placeholder is ultimately rendered in the <head> section of the web page.  The second is ultimately displayed in the main <body> area of the web page.

Note...remember to change any image names and/or URL's if yours are different than those used for this demo.

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
var currentBanner = 0;

$(document).ready(function() {
  setInterval('showBanner(1)', 5000);
});

function showBanner(val) {
  val = (currentBanner > 1 ? 0 : currentBanner + 1);
  $('#bannerImage' + currentBanner ).hide('slow');
  $('#bannerImage' + currentBanner ).prev().removeClass('css-banner-text-selected');
  $('#bannerImage' + val).show('slow');
  $('#bannerImage' + val).prev().addClass('css-banner-text-selected');
  currentBanner = val;
}
</script>
<style type="text/css">
.css-banner-text {
  background: #000000;
  padding: 12px;
  vertical-align: middle;
  border-bottom: 1px #e0e0ff solid;
  position: relative;
  width: 276px;
}
.css-banner-text-selected {
  background: #e0e0ff;
}
</style>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
  <div style="float:right; margin-right: 30px; margin-left: 30px;">
    <div class="css-banner-text css-banner-text-selected">
      <div>
        <span>Click image to visit Google</span>
      </div>
    </div>
    <div id="bannerImage0" class="css-banner-text-selected">
      <a href="http://www.google.com"><img border="0" src="/JQuery-Demo/Accordion-Banner-Image-Rotator/BannerImages/fish.jpg" width="300" height="200" /></a>
  </div>
  <div class="css-banner-text">
    <div>
      <span>Click image to visit Facebook</span>
    </div>
  </div>
  <div id="bannerImage1" style="display:none">
    <a href="http://www.facebook.com"><img border="0" src="/JQuery-Demo/Accordion-Banner-Image-Rotator/BannerImages/croc.jpg" width="300" height="200" /></a>
  </div>
  <div class="css-banner-text">
    <div>
      <span>Click image to visit LinkedIn</span>
    </div>
  </div>
  <div id="bannerImage2" style="display:none">
    <a href="http://www.linkedin.com"><img border="0" src="/JQuery-Demo/Accordion-Banner-Image-Rotator/BannerImages/polarbear.jpg" width="300" height="200" /></a>
  </div>
</div>
<div style="margin: 20px;">
  This is a demonstration of an accordion banner image rotator implemented on SharePoint 2010 using jQuery.
  You could also include this widget on a page layout, or even a master page.
</div>
</asp:Content>

Step 4:
Launch the page and see the banner rotation in action!  The banner ads will rotate every five seconds.

SharePoint 2010 - jQuery Accordion Banner Image Rotator Demo

Click here for a live demonstration of the sample accordion banner image rotator in action.

Summary

The intention of this guide was to demonstrate how jQuery, along with a relatively few lines of client-side code, can help the SharePoint developer to greatly enhance user experience.  Thanks for reading, and please feel free to leave a comment.

Comments for Spice up your SharePoint 2010 site by adding a little jQuery


Name: rachel
Time: Friday, August 17, 2012

Very nice image rotator! The only issue I'm having is once there is web part inserted below the image rotator, the content shifts up and down. Is there anyway to make the div fixed and not shifting? Or maybe change the sliding direction from vertically to horizontally?

Name: Heath Anderson
Time: Friday, August 24, 2012

Yes, you can avoid the shifting by assigning a height to the outermost div. Modify the first div which has style="float:right; margin-right: 30px; margin-left: 30px;" to include a height attribute such as style="float:right; margin-right: 30px; margin-left: 30px; height: 300px;". Just be sure the height is large enough to cover the area of the screen needed for your rotator.

Name: Meka
Time: Wednesday, March 6, 2013

Hi - thanks for the beautiful info, am having issues adding more than 3 images, the ones afterwards dont show up, any idea why? - thanks

Name: Heath Anderson
Time: Friday, March 8, 2013

Meka, The reason you're only seeing 3 images in the rotation is likely due to the following line of code:

val = (currentBanner > 1 ? 0 : currentBanner + 1);

This line of code is used to determine the index of the image to show and hide. The value used in the comparison is 2 fewer than the total number of images. If you have 5 images for example, you would change the line as follows:

val = (currentBanner > 3 ? 0 : currentBanner + 1);

Name: Mark
Time: Thursday, April 11, 2013

Hi, would it be possible to change the rotation from top down to left and right?

Leave a comment





Captcha