An Alternative Photo Rotator Solution

A customer of ours had an issue with the out of the box photo rotator in SharePoint – every few minutes it kept prompting them for credentials.  After some inspection, I noticed that pretty much every rotator solution would always change the image by swapping between two <img> elements, and changing the URL of the one not currently in focus.  As this was ultimately causing the browser to fetch new content every few seconds, I decided to write my own rotator which instead does a one time pull of all the images, and iterates between the collection.

Many thanks to Bill Simser for much of the code for querying the lists in this article here.

First off, get a copy of a jQuery library and store it somewhere on your site.  Next, create a picture library, and name it “Rotator Images”. 

After you’ve got those in place, put this code into a content editor (using edit HTML source), and your rotator should come alive.

Here’s the code, enjoy!

[code language=”html”]
<div id="RotatorCont"></div>
<style type="text/css">
.pictureWrapperDiv
{
margin: 0px;
padding: 0px;
border: 0px;
}
.pictureGallery
{
margin: 0px;
padding: 0px;
border: 0px;
}
</style>

<script type="text/javascript" src="/Style%20Library/Branding/Scripts/jQuery-1.7.1.js"></script>
<script type="text/javascript">

//Globals for # of secs between images, max width and height, and the name of the picture library (must be local to this web site)
//You can modify these as necessary
var itgLoadTimeSecs = 8;
var itgImgHeight = 296;
var itgImgWidth = 390;
var itgRotatorLibraryTitle = "Rotator Images";

//Globals for internal use only (don’t change these)
var itgImgRotCount = 0;
var itgImgRotIter = 0;
var picid = "itgDynaImg";
var itgLoadTime = itgLoadTimeSecs * 1000;

$(document).ready(function(){
//start your engines
pageonload();

//Set a slight delay before kicking off the query (just for good measure)
setTimeout(loadSharePointPictures, 250);
});

function pageonload()
{
var rota = $("#RotatorCont");
rota.css("display", "inline-block");
}

function loadSharePointPictures()
{
//fetch the list of items using the client object model
var context = new SP.ClientContext.get_current();

//get the current website
var web = context.get_web();

//get the pictures list
var list = web.get_lists().getByTitle(itgRotatorLibraryTitle);

//create the query to get all items
var query = SP.CamlQuery.createAllItemsQuery();

//get all items from the query
pictures = list.getItems(query);

//load the context
context.load(pictures, ‘Include(FileLeafRef,FileDirRef)’);

//execute the query in async mode
context.executeQueryAsync(
Function.createDelegate(this, this.success),
Function.createDelegate(this, this.failed)
);
}

function success(sender, args)
{
pictureArray = new Array();
var pictureCount = 0;

//pull the details about each image (directory and filename) out of the result
var enumerator = this.pictures.getEnumerator();
while(enumerator.moveNext())
{
var currentItem = enumerator.get_current();
var filename = currentItem.get_item(‘FileLeafRef’);
var dir = currentItem.get_item(‘FileDirRef’);
filename = dir + ‘/’ + filename;
pictureArray[pictureCount++] = filename;
}
var newHtml = ”;

//set the first image to display
var itgdispval = "block";

//iterate through the result and create HTML code (img with div wrapper) for each picture
for(var i = 0; i < this.pictureArray.length; i++)
{
if (i > 0)
{
//set all the additional images to hidden
itgdispval = "none";
}
newHtml += ‘<div id="’ + picid + i.toString() + ‘" class="pictureWrapperDiv" style="height: ‘ + itgImgHeight + ‘px; max-height: ‘ + itgImgHeight + ‘px; width: ‘ + itgImgWidth + ‘px; max-width: ‘ + itgImgWidth + ‘px; display: ‘ + itgdispval + ‘;"><img class="pictureGallery" src="’;
newHtml += this.pictureArray[i];
newHtml += ‘" style="max-height: ‘ + itgImgHeight + ‘px; max-width: ‘ + itgImgWidth + ‘px;"/></div>’;
}
//store the number of images
itgImgRotCount = i;

//start the iterator
itgImgRotIter++;

//assign the HTML to the rotator container
$(‘#RotatorCont’).html(newHtml);

//start the rotator
setTimeout(itgRotateImg, itgLoadTime);
}

function failed(sender, args)
{
//alert("Failure: [" + sender + "] / [" + args + "]");
}

function itgRotateImg()
{
var dynapicid = picid + itgImgRotIter.toString();
var dynalast = 0;
if ((itgImgRotCount > 0) && (itgImgRotIter == 0))
{
dynalast = itgImgRotCount – 1;
}
else
{
dynalast = itgImgRotIter – 1;
}
var dynapicidlast = picid + dynalast.toString();

//hide the last image to be displayed
$(‘#’ + dynapicidlast).css("display", "none");

//show (fade in) the next image
$(‘#’ + dynapicid).fadeIn(400);
if ((itgImgRotIter + 1) < itgImgRotCount)
{
itgImgRotIter++;
}
else
{
itgImgRotIter = 0;
}
setTimeout(itgRotateImg, itgLoadTime);
}
</script>
[/code]