1602 1535 bas.jacobs
Blog Posts
SharePoint 2013 REST jQuery Slideshow

After the SharePoint 2010 Slideshow I searched for a better solution for SharePoint 2013. I found a lot of Slideshow solutions still using SOAP calls.

The better solution in this case (see announcement below) was creating a solution based on the new SharePoint 2013 REST API.

 

“Two API sets are still supported in the SharePoint 2013 framework for backward compatibility, but we recommend that you not use them for new projects: the ASP.NET (asmx) web services, and direct Remote Procedure Calls (RPC) calls to the owssvr.dll file”

 

With 3 simple steps and minimal code we can create a cool slider.

  • Create a SharePoint 2013 picture library and name it “Banners”
  • Add the REST call and plugin code to your Page Layout
  • Style/add content however you want!

This is the slider we want to go for, as seen on http://www.slidesjs.com

Take a look at the following demo:

 

Demo Slider

 

OK, let’s start!

  • Create a SharePoint 2013 picture library and name it “Banners”
  • Add an app > Picture Library > Name it “Banners” > Add some images

The result should be the following:

 

 

  • Add the REST call and plugin code to your Page Layout

 

First add the placeholder for the append images code

Now we can add the REST call to the “Banners” Picture Library and run the slidesjs plugin

 

Copy and paste : )


jQuery(document).ready(function() {
var basePath = "/_api/";
jQuery.ajax({
url: basePath + "lists/GetByTitle('Banners')/items?$select=EncodedAbsUrl,Title",
type: "GET",
headers: { "Accept": "application/json;odata=verbose" },
success: function (data) {
//script to build UI HERE
jQuery.each(data.d.results, function (index, value) {
jQuery("#slides").append("<img src='" + value.EncodedAbsUrl + "'" + " alt='" + value.Title + "'/>");
});
jQuery(function () {
jQuery('#slides').slidesjs({
play: {
active: true,
auto: true,
interval: 5000,
swap: true
}
});
});
},
error: function (data) {
//output error HERE
alert(data.statusText);
}
});
});

 

Now,

 

  • Style/add content however you want!

Good luck!

Comments - 6 Responses to “SharePoint 2013 REST jQuery Slideshow”

  1. Hayden Hancock says:

    This looks excellent! I will try it out!

  2. Brett says:

    Hi, Does this work for SharePoint 2010? Or only SP2013?

  3. Bastiaan says:

    @Brett In 2010 the base functionality was already present. You can use /_vti_bin: https://msdn.microsoft.com/en-us/library/ff798339.aspx

  4. Amber Berg says:

    I copied the exact code and put the whole thing in html file and then referenced the file from content query web part. The look and feel is way off. Am I missing something.

  5. Bastiaan says:

    @Amber, try to open the page in Chrome. Chrome will log if you have a reference error relative to the location you are working at (f12 > console).

Leave a Reply




HTML5 Accepted Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>