Rotate pictures from a pictures library


Pre-requisites
To use SPItemsRotator to show pictures from a pictures library, 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
RotatePicturesSource.JPG

you can copy the content from this box :
<div id="divPictures" style="height:200px;"></style>
<script>
   $(window).ready(function(){
	$("#divPictures").rotatePictures({
		webURL:"/sites/spitemsrotator",
		listName:"My Pictures"
	});
   });
</script>
  • The pictures should now rotate in your web part, with automatic resizing inside divPictures container
Pictures.JPG


Need more options ?
  • See below all default options that can be overriden when using rotateAnnouncements method :
<div id="divPictures" style="height:200px;"></style>
<script>
   $(window).ready(function(){
	$("#divPictures").rotatePictures({
		webURL:"/sites/spitemsrotator",		//URL of the web site that contains the list
		listName:"My Pictures",		//Name of the list
		itemClass:"rotator-item",		//CSS class applied to each item
		displayDuration:5000,		//Duration in milliseconds between each rotation
		fadeDuration:1500,		//Duration in milliseconds of the rotation
		CAMLViewFields:"<ViewFields><FieldRef Name="RequiredField" Explicit="TRUE" /><FieldRef Name="EncodedAbsUrl" /><FieldRef Name="NameOrTitle" /><FieldRef Name="ImageWidth" /><FieldRef Name="ImageHeight" /></ViewFields>", //Fields returned by the query
		CAMLQuery:"",		//override the CAML query
		CAMLQueryOptions:"<QueryOptions><ViewAttributes Scope=\"Recursive\" /></QueryOptions>",		//override the CAML query options
		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"
		showToolip:false		//if true, will display the title of the picture when mouse hovers
	});
   });
</script>

Last edited Oct 18, 2009 at 6:07 PM by anouvel, version 8

Comments

SPSteve33625 Oct 6, 2014 at 7:15 PM 
I realize this is an out of date project, but it still works on SharePoint 2010. Has anyone developed, or is there the possibility of creating functionality for moving backward and forward through the list items?

rahul5515 Jul 22, 2012 at 1:06 PM 
not working for me its not showing any error. But picture is also not displaying

krystalc Mar 30, 2011 at 10:25 PM 
I have followed the instructions and the pictures from my library are rotating correctly.
However, I set the showtoolip (also tried showtooltip in case it was a type) and the picture title does not display when a mouse hovers.
Any help would be greatly appreciated.

jagkon Apr 17, 2010 at 1:45 PM 
I used this in one of my Sharepoint page using Content Editor Webpart
This worked absolutely fine for me. Thanks a lot for that.
But when i exposed that page to internet with "Anonymous Access". To access that page it still asks for sign-in.
Can somebody help me in solving this.
I think it requires elevated credentials to run "/jquery.SPServices-0.5.2.js" ..
This is really urgent for me. Any help would be appreciated.

aalap Mar 11, 2010 at 8:31 AM 
hi i followed all the steps for images. but hard luck. no image is showing and no error.
i m using wss 3.0. please help me.