Part II of the blog posts now, adding a quick tweak to auto populate the images from an ImageLibrary.

In the last post we created all the elements needed for this next piece, if you have that working then great.

First a couple of things

Get the latest SPServices version be sure to match the versions correctly especially where jQuery 1.7 and SPServices versions are concerned, changes in jQuery caused some problems in peoples libraries.  Put that library in the place you like to store them (_layouts, portal root, site collection, doc lib which ever I stuck it in my SPFolder in the site collection)

Add a new field to your Image Library, a checkbox and call it active.

Paste this code (after you modify the include statements to point at the places you stored them).


I haven’t put any error trapping in this code or loading pictures or messages to say activate at least one image you idiot but you can and I would if this was going on a real site. You could extend this code to get descriptions from the image library and if there was one add it to the slider text.


<div id="gamesHolder" style="width:468px;height:280px;overflow-y:hidden;">
    <div id="games">

jQuery(function($) {
         operation: "GetListItems",         
         async: true,         
         listName: "ImageLibrary", 
         CAMLQuery : "1",        
         CAMLViewFields: "",         
         completefunc: function(data) 
                var theMiddle="";
                $(data.responseXML).find("z\:row, row").each(function(){
                    var getimage= "/" + $(this).attr("ows_FileRef").substring( $(this).attr("ows_FileRef").indexOf("#") +1 );

                    theMiddle +='<a href="' + getimage + '" target="_blank"><img src="' + getimage + '" /></a>';


                $('#games').coinslider({ hoverPause: false, height:246, width:618});