In this positing I’m going to cover utilizing the SPServices codeplex project to build a “Gallery” of sorts. In this demo we’ll be creating a picture gallery but ideally this code be used for any content. The main focus of this article is how to take advantage of the paging capability of the list web service. I found this to be a sparsely document capability and this demo might enlighten some people on how to use it.

Some of you might say, “What’s the point of this. There are so many jQuery galleries and quite frankly they look better!”

Well very true they do look better, and they might even have pagination. The problem with those is that you might have to load all the data on the page before it could perform its magic. This demo will only load the 6 items at a time, and this technique could be used on any type of object that needs pagination, and it’s more of a real world example of how to use the SPServices to make list web services calls using the CAML options for paging.

With all that said, let’s get started. Just want the files? Download the CEWP & gallery.js here

Pre-Requisites:

Download SPServices, and jQuery store them in a folder on your SharePoint site. I’m using SPServices 0.6.0 & jQuery 1.5.1

  1. First I’ve created an image gallery called – “Gallery”
  2. Add more than 6 pictures to this library.
  3. Next edit the page and pop in a Content Editor Web Part, add in your script references.

** gallery.js is the name of our script file that we will be making **

  1. Next add in the HTML structure that we’ll need.

  1. Lastly lets add just a touch of style

Attached is the gallery.js, upload that where your other javascript files are and make sure the reference in step 3 is correct.

Let’s take a look at the gallery.js to explain what its doing as well as show you what you can configure. I’ll be jumping around the script but I’m leaving the line numbers in there so you know where I am.

The rowLimit is the number of items to display per page, The list is the name of your List, and the query can be configure at the top of the script. (this can be expanded out to have a selected rowLimit or filters)

The following starts the creation of the gallery. Its contained in a function called Update(). Update will call the three functions to build the gallery. GetItems -> BuildNav -> UpdatePrevNext

This GetItems() function takes a position and a row limit and displays that set of items. The output of the items can be modified inside the $(xData.responseXML).find(“[nodeName=’z:row’]”).each(function(i) { });

Next function BuildNav() builds out the navigation, it does this by making repetive calls to the web service with the row limit and the next position. In terms of performance, the more items you have and the smaller the row limit, then the more web service calls will be made. The less items and higher row limit, then the less web service calls will be made. This section also builds out the initial Prev & Next links.

In line 156 above the build nav will call GetNextPos and it will feed it the current position with a row limit in order for it to return the next position in the pagination

Lastly the script binds to the click events of the pagers, previous and next buttons.

So that’s it .. The finished product. A jQuery type solution to creating a paginated gallery type widget.

Download the CEWP & gallery.js here

About the Author

Developer, Designer, Thinker, Problem Solver, Office Servers and Services MVP, & Collaboration Director @ SoHo Dragon.

View Articles