Warning: strlen() expects parameter 1 to be string, array given in /home/merchant/public_html/jm2010/wp-content/plugins/wordbooker/wordbooker.php on line 1467
0

Dynamic SharePoint Slideshow

Posted January 22nd, 2013 in SharePoint and tagged , , , , by Jonathan

First, let me start by saying that last year there was a shake up where I work. I went from a PHP developer to a SharePoint Admin. So you’ll probably start seeing more and more SharePoint articles – but…it doesn’t mean I don’t still develop in PHP, I just do it less.

Now…onto the awesome.

There are a few prerequisites here.

  1. SharePoint 2010 (I’m sure it’ll work for 2007 and maybe 2013 – but I don’t guarantee it)
  2. SPServices
  3. Jquery
  4. Nivo Slider

Another thing to note here. I chose an Image Library over an Asset Library because of MSDN‘s best practice guide on still accessing the list web service. You could probably get away with a Document library too.

So let’s get started,

1. Create an HTML page (I did this through SharePoint Designer) and load up your libraries.

	
		

2. Create the CAMLQuery for SPServices to get the fields you need out of the image library. As a side note, I added 2 extra columns to the library. One is “Show Image” which is a Yes/No type and then a Image Link which is an HTML link type. You’ll see this referenced in the query.

        var query = "1";

This allows us to only show those images that are marked to show.
3. Now let’s build the meat and potatoes of the function.

        $().SPServices({
		operation: "GetListItems",
		async: false,
		webURL: "/corporate/marketing/", //don't list the library/list
		listName: "PortalBillboardSlideShow",
		CAMLQuery: query,
		CAMLViewFields: "",
			completefunc: function (xData, Status) {
			slideImg 	= "";
			imgURL 		= "";
			imgTitle 	= "";
			tLink1		= "";

			$(xData.responseXML).SPFilterNode("z:row").each(function() {

				//build images html
				imgURL 		= $(this).attr("ows_RequiredField");
				if ($(this).attr("ows_Title") === undefined || $(this).attr("ows_Title") === null) {
					imgTitle = "";
				} else {
					imgTitle = $(this).attr("ows_Title"); 
				}

				//build html link for image
				if ($(this).attr("ows_Image_x0020_Link") === undefined || $(this).attr("ows_Image_x0020_Link") === null) {
					slideImg += "";
				} else {
					tLink1 = $(this).attr("ows_Image_x0020_Link").split(",");					

					slideImg += "";
				}

			});

		}

	});

It’s pretty straight forward on what it’s doing. It queries the list, then loops through the response and builds the html for the images. The Image Link if found is used to wrap the image in a link.
4. Now we’ll set up the Nivo slider and add the slideImg html to it.

      $(document).ready(function() {
		$("#slider").append(""+slideImg+"");
		$('#slider').nivoSlider({
			effect: 'fade'
		});
	});

This takes the value of slideImg and appends it to the slider div and gives us the dynamic-ness of our slider. So in my case I have a different group in charge of the images, so they can upload them and set the ones they want to show, add links if they want and I don’t have to do it.

Now one other option that I think may come along with this is the ability to set if a linked image is internal or external, but that could be done with another column added like “External Link” as a Yes/No type.

But there you go, a simple dynamic slideshow on SharePoint.

Leave a Reply





CommentLuv badge