CTS – Your Technology Partner

Create a Slide Show in SharePoint 2010 using an Announcements List and SPServices

Written by Matt Overton on April 16, 2013

Create a Slide Show in SharePoint 2010 using an Announcements List and SPServices
By Trace Armstrong

twitter_trace_thumb.jpg

Recently, I had a client who wanted a different slide show for their SharePoint 2010 intranet home page. The original slide show ran using a custom web part that integrated the Nivo Slider, a jQuery based solution. The solution worked great but the person maintaining the news portion of the slider needed a no-code solution for easier updating.

I searched the Internet for a solution and came across this blog (https://www.nothingbutsharepoint.com/sites/eusp/Pages/Creating-your-own-Content-Slider-for-SharePoint.aspx) by Eric on http://www.nothingbutsharepoint.com. The solution was similar to what I needed but my task also required a place for slideshow images.

The first step was using the Announcements list for the announcements slider. I then created two custom list columns, “Image” and “Body”. The “Image” column is a “Hyperlink or Picture” column type and “Body” is a “multiple lines of text” column type.

Using Eric’s model, I referenced SP Services, jQuery, jShowoff, and set about editing the JavaScript code to pull an image column from the Announcements list.

The revised JavaScript looks like this:

$(document).ready(function(){
var emptyResults = “<div class=’sliderDiv’><p class=’announceTitle’>Company Name</p></div>”;
var maxVal = 0;
var toShow = false;
var heightTemp  = 0;
$().SPServices({
operation: “GetListItems”,
async: false,
listName: “Announcements”,
CAMLViewFields: “<ViewFields><FieldRef Name=’Title’ /><FieldRef Name=’Image’ /><FieldRef Name=’Body’ /><FieldRef Name=’Modified’ /></ViewFields>”,
CAMLQuery: “<Query><OrderBy><FieldRef Name=’Created’ /></OrderBy>” +“<Where><Or><Geq><FieldRef Name=’Expires’ /><Value Type=’DateTime’>” + “<Today /></Value></Geq><IsNull><FieldRef Name=’Expires’ /></IsNull></Or></Where></Query>”,

completefunc: function (xData, Status) {
var itemCount = $(xData.responseXML).find(“[nodeName=’rs:data’]”).attr(“ItemCount”);
if(itemCount > 0){
toShow = true;

$(xData.responseXML).find(“[nodeName=’z:row’]”).each(function() {
var modDate = $(this).attr(“ows_Modified”);
modDate = modDate.substr(5, 2) + “/” + modDate.substr(8, 2) + “/” + modDate.substr(0, 4);

var titleHtml = “<div class=’sliderDiv’><p class=’announceTitle’>” + $(this).attr(“ows_Title”) + “</p>”;
var imgBody = “<img class=’anImage’ src='” + $(this).attr(“ows_Image”).split(‘,’)[0]+ “‘></img>”;
var bodyHtml = “<p class=’announceBody’>” + $(this).attr(“ows_Body”);+ “</p>”;
var expireHtml =“<p class=’announceFooter’>Modified: <span>” + modDate + “</span></p></div>”;

//div announcements is added by jshowoff js.

$(“#announcements”).append(titleHtml + imgBody + bodyHtml + expireHtml);

   });

}else{

$(“#announcements”).append(emptyResults);

   }

} //completefunc

}); //SPServices

if (toShow == true) {
$(‘.sliderDiv’).each(function() {
     heightTemp = $(this).height();
if (heightTemp > maxVal) { maxVal = heightTemp };
});
$(‘#announcements’).css(‘min-height’,maxVal);
$(‘#announcements’).jshowoff({
speed:12000,
changeSpeed: 3000,
controls: true,
animatePause: false,
effect: ‘fade’,
cssClass: true,
links: true
});
} //if stm
}); //ready

I edited a few syntax issues that were unnecessary to the solution and created/referenced a new variable, “imgBody”. The variable adds the img class “anImage” and retrieves the slide show image from the list column “Image”. One of the problems in the solution was SharePoint adding a comma to the end of the file name. The split property removes the comma and the image displayed as intended on the site.

The solution appears like this on the client’s main page.

Slide Show

This solution enabled the company to have a no-code update to their main page news slider using an image library and the Announcements list.

Comments

comments