Rotate items from an announcements list

To use SPItemsRotator to show items from an announcements list, you will need to add some HTML code to your page. The easiest way is to place it in a Content Editor Web Part, but you can also add it directly in the master page or in a publishing page layout.
In this example, we will use a Content Editor Web Part.

Quick start
  • Navigate to the page where you want to display the web part
  • Using the Site Actions menu, click "Edit Page"
  • Click "Add a Web Part" in a web part zone
  • Select the "Content Editor Web Part" and click Ok
  • Edit the web part's configuration using the "Modify Shared Web Part" menu item
  • Click the "Source Editor" button, and paste this code in the window

you can copy the content from this box :
<div id="divAnnouncements" style="height:150px;"></style>
		listName:"My Announcements"
  • The announcements that are not expired should now rotate in your web part, with automatic resizing inside divAnnouncements container

Need more options ?
  • See below all default options that can be overriden when using rotateAnnouncements method :
<div id="divAnnouncements" style="height:150px;"></style>
		webURL:"/sites/spitemsrotator",		//URL of the web site that contains the list
		listName:"My Announcements",		//Name of the list
		displayDuration:10000,		//Duration in milliseconds between each rotation
		fadeDuration:1500,		//Duration in milliseconds of the rotation
		CAMLViewFields:"<ViewFields><FieldRef Name='Body' /></ViewFields>", //Fields returned by the query
		CAMLQuery:"<Query><Where><Or><IsNull><FieldRef Name='Expires' /></IsNull><Geq><FieldRef Name='Expires' /><Value Type='DateTime'><Today /></Value></Geq></Or></Where></Query>",		//override the CAML query
		itemHtml:"{ows_Body}",		//pattern used to display each item. Change this if you want specific formatting. Example : itemHtml:"<div>{ows_Title}</div><div>{ows_Body}</div>"
		debug:false,		//If true, some debugging information will be displayed in the console (Firebug for Firefox, native in IE8)
		outerContainer:this,		//Set this to a jQuery object that has to be hidden if there are no items in the list. example : outerContainer:$("#myContainer")
		randomStart:true,		//Set to false if you want items to be displayed in normal order
		overflow:"hidden",		//specify overflow : "visible" or "hidden"
		getItemHtml:jQuery.SPItemsRotator.getItemHtml		//function that will be used to render each item

Last edited Oct 18, 2009 at 7:27 PM by anouvel, version 14


Strausy Apr 21, 2014 at 6:17 PM 
Anyone got this to work in Chrome? Works fine in IE and Firefox, but I get nothing to show up with Chrome.

brwalias Nov 12, 2012 at 9:13 PM 
Ginger, yes

bbarkman Apr 13, 2012 at 8:36 PM 
This webpart is working great!

Two questions:
Is it possible to make the image/announcement click-able?
Can we make the images or announcements slide instead of fade?

Thanks in advance...

ekastner Nov 5, 2009 at 8:11 PM 
I tried loading all of the js files via the same content editor web part like so:

<script type="text/javascript" src="/sites/erick/Shared%20Documents/jquery.SPItemsRotator-0.1.1.js"></script>
<script type="text/javascript" src="/sites/erick/Shared%20Documents/jquery.SPServices-0.4.1.min.js"></script>
<script type="text/javascript" src="/sites/erick/Shared%20Documents/jquery-1.3.2.js"></script>
<div id="divAnnouncements" style="height:150px;"></div>

When the page loads, I can see "Please wait while scripts are loaded..." in the status bar, but nothing appears in the web part. Any help would be appreciated.

GingerNinja Oct 20, 2009 at 12:23 AM 
I think you mean </div> not </style> yes?