Rotate items from an announcements list


Pre-requisites
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
AddWebPart.JPG
  • Edit the web part's configuration using the "Modify Shared Web Part" menu item
EditWebPart.png
  • Click the "Source Editor" button, and paste this code in the window
RotateAnnouncementsSource.JPG

you can copy the content from this box :
<div id="divAnnouncements" style="height:150px;"></style>
<script>
   $(window).ready(function(){
	$("#divAnnouncements").rotateAnnouncements({
		webURL:"/sites/spitemsrotator",
		listName:"My Announcements"
	});
   });
</script>
  • The announcements that are not expired should now rotate in your web part, with automatic resizing inside divAnnouncements container
Announcements.JPG

Need more options ?
  • See below all default options that can be overriden when using rotateAnnouncements method :
<div id="divAnnouncements" style="height:150px;"></style>
<script>
   $(window).ready(function(){
	$("#divAnnouncements").rotateAnnouncements({
		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
	});
   });
</script>

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

Comments

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>
<script>
$(window).ready(function(){
$("#divAnnouncements").rotateAnnouncements({
webURL:"/sites/erick",
listName:"Announcements"
});
});
</script>

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?