Skip to main content

Cloud

Dynamic Picture Library Slideshow that you can add to 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”

  1. Are there any JavaScript errors on the page? Errors will show in f12 tools (I recommend Chrome for it).

  2. Nice work, thanks. I had to change the inside quotes in the CAML query to double quotes to get it to work:

  3. 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

  4. Seth Broweleit

    @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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Seth Broweleit

More from this Author

Follow Us