Dynamic Picture Library Slideshow in SharePoint 2010 site

The following code is a combo of JavaScript (jQuery) & little HTML. It can be pasted into a 2010 Content Editor Web Part (CEWP) to create a dynamic slideshow of a Picture Library.
All you will need to do after pasting the code below into a CEWP is change the two items that are indicated by CAPS to the values that match your site.

<div style="position: relative" id="imgCntr"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script>

function onQuerySucceeded(sender, args) {

var listItemInfo = '';

var listItemEnumerator = frontPictureItems.getEnumerator();

var listItems = '';

while (listItemEnumerator.moveNext()) {

var oListItem = listItemEnumerator.get_current();

listItems += '<img src="/URL-TO-PICTURE-LIBRARY/' + oListItem.get_displayName() + '.png" style="position:absolute" />';

}

$('#imgCntr').html(listItems);

initSlider();

}

function onQueryFailed(sender, args) {

alert('Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());

}

function initSlider() {

$('#imgCntr img:gt(0)').hide();

setInterval(function(){$('#imgCntr :first-child').fadeOut().next('img').fadeIn().end().appendTo('#imgCntr');}, 6000);

}

function loadSlideImages() {

var clientContext = new SP.ClientContext.get_current();

var oList = clientContext.get_web().get_lists().getByTitle('NAME-OF-PICTURE-LIBRARY');

var camlQuery = new SP.CamlQuery();

camlQuery.set_viewXml('<View><Query><Where><Leq>' +

'<FieldRef Name='ID'/><Value Type='Number'>100</Value></Leq></Where></Query><RowLimit>50</RowLimit></View>');

this.frontPictureItems = oList.getItems(camlQuery);

clientContext.load(frontPictureItems, 'Include(Id, DisplayName, FileLeafRef)');

clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

$(window).load(function () {

ExecuteOrDelayUntilScriptLoaded(loadSlideImages, "sp.js");

});

</script>

Thoughts on “Dynamic Picture Library Slideshow that you can add to SharePoint 2010 site”

Ncy February 25, 2013 at 5:05 pm

This doesnt work for me. can you help
Seth Broweleit February 25, 2013 at 9:07 pm

Are there any JavaScript errors on the page? Errors will show in f12 tools (I recommend Chrome for it).
Chris March 8, 2013 at 9:02 am

Nice work, thanks. I had to change the inside quotes in the CAML query to double quotes to get it to work:
Glenn January 30, 2014 at 10:55 am

Works very nicely. Is there a way to change the hyperlink to go to a specific page for each image instead of the image itself when you click on it?
Thanks
Ed March 2, 2014 at 5:12 pm

where do you get the sp.js resource file?
Seth Broweleit March 3, 2014 at 9:47 am

@Ed When it is in the context of a Sharepoint page the site provides the ExecuteOrDelayUntilScriptLoaded() function and will load sp.js if it has not already.