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.
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>
This doesnt work for me. can you help
Are there any JavaScript errors on the page? Errors will show in f12 tools (I recommend Chrome for it).
Nice work, thanks. I had to change the inside quotes in the CAML query to double quotes to get it to work:
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
where do you get the sp.js resource file?
@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.