Me & My SharePoint [FrontEnd]

© Christian Stahl – All about SharePoint branding & customizations

Getting started with REST in SharePoint 2013 – Part III — July 31, 2014

Getting started with REST in SharePoint 2013 – Part III

Welcome to the third post in this series about REST in SharePoint 2013, this post is a follow up to the previous post about how to create a web part with help of REST web service that will display something from a SharePoint list. In this post I’ll show you how to use the same approach but integrate a typical jQuery plugin, a image slider to the REST script. This will work the same no matter if it’s SharePoint Online or Onprem.

gondolas

The goal in this post is to create a jquery image slide using content editor web-part or in a single page and of course, if you prefer you can pack this a web part with Visual Studio instead. There’s a lot of jQuery sliders out there, in this example I used Basic jQuery Slider I like this plugin because it’s simple and lightweight and are easy to style in many different ways.
There are two core files required to get up and running with Basic jQuery Slider, the JavaScript plugin and the jQuery library plus a portion of css for the styling. Take a look at the refererences and the css in a single page you can download from here .

One thing to note about the REST script is that the ajax call happens asynchronously, so it’s important that you initialize the slider inside the ajax success callback. Do also note that I’ve created a couple of variables for the image path and build the URL with jQuery’s Pop, Split and Shift methods. That’s because I wanted to read from the automatic thumbnail folder (_w) instead of the the folder for the full image.

I hope this post gives you some inspiration to get started to create web parts displaying something from SharePoint lists, and there’s a plenty of useful jQuery plugins for different kind of task to play around with out there!

Please read the first two posts before you go on to this post:

Create a image slider with REST

if (_spPageContextInfo.webServerRelativeUrl === '/') {
	var webUrl = '';
}    
else{
	var webUrl = _spPageContextInfo.webServerRelativeUrl;
}

// start ajax
$.ajax({
	url: webUrl + "/_api/Lists/GetByTitle('PublicImages')/items?$select=EncodedAbsUrl,Title",
	type: "GET",
	headers: {"Accept": "application/json;odata=verbose"},
	cache:false,
	// start success                  
	success: function(data){
	
		var items = [];
		 	items.push("<div id='banner-slide'>");
			items.push("<ul class='bjqs'>");
	        
		// if content exist
		var dataResult = data.d.results;
		    if (dataResult.length == 0) {
		        items.push("<div id='listNoRecords'>" + 'No images were found..' + "</div>");
		    }    
		    else{
				// start data.d.results
				$(data.d.results).each(function(){
				var imgURL = this.EncodedAbsUrl;
				var mainurl = imgURL.substring(0, imgURL.lastIndexOf("/") + 1);			
				var fileextension = imgURL.substring(imgURL.lastIndexOf(".") + 1, imgURL.length);
				var imgnameVar = imgURL, imgname;
					imgname = imgnameVar.split('/').pop().split('.').shift(); 
				var thumb = '_w/';
				var extension = '.JPG';

				items.push('<li>' + 
				        	' <img src="' + mainurl + thumb + imgname + '_' + fileextension + extension + '"/' + 'title='  +'"' + this.Title +'"' + ' />' +
				    	   '</li>');
	
				});
				// end data.d.results		
	    	}    
	    	// end if content exist
				
				items.push("</ul>");
				items.push("</div>");

				// Add HTML and it's content to the listResult div
				$("#listResult").html(items.join(''));
				
				// Start Image Slider
				$('#banner-slide').bjqs({
					animtype      : 'slide', //fade
		            width         : 340,
					animduration : 450, // how fast the animation are
					animspeed : 4000, // the delay between each slide
					showcontrols : false, // show next and prev controls
					showmarkers : true, // Show individual slide markers
					centermarkers : true, // Center markers horizontally
					keyboardnav : true, // enable keyboard navigation
					hoverpause : true, // pause the slider on hover
					usecaptions : true, // show captions for images using the image title tag
					randomstart : true // start slider at random slide
				});

	}
	// end success  
	
});
// end ajax

I will be back soon so stay tuned for the next post!