Quickest way to create Slide Show from your Picture Library in SharePoint

Although there are many scripts available on internet which helps you to create slide show or image carousel but none of them gives us the ability to display Title and Description along with the image. I searched quite a lot and then ultimately end up creating my own.

I must clarify that I have not written the entire code myself. What I have done is to use the following already available JavaScript libraries and then assemble them in a way which gives us a quickest way to create image carousel from SharePoint Picture Library:

Enough talk, now lets come to the point:)

Step 1: Plugin Setup

1. Download the Easy Slider Plugin from http://cssglobe.com/lab/easyslider1.7/easyslider1.7.zip
2. Unzip the file and Upload easySlider1.7.js to a document library.

Step 2: Note down the List ID

1. Navigate to your Site Actions -> Site Settings
2. Under Site Administration, click Site libraries and lists
3. Click on your Picture Library name, to open it.
4. Note down the value of parameter List as displayed in Url window of your Internet explorer. It will be something like {26EC0E08-3D8A-4C67-ABF5-909D572B3030}
5. Add a content editor web part (CEWP) on your target page

Step 3: Set up Content Editor Web Part

1. On your target page, add a content editor web part (CEWP)
2. Paste the following code in Source Editor

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- Step 1:  Download easy slider plugin fromhttp://cssglobe.com/lab/easyslider1.7/easyslider1.7.zip  -->
<script type="text/javascript" src="http://TestServer/TestSite/js/easySlider.js"></script>

	<script type="text/javascript">
	_spBodyOnLoadFunctionNames.push("startSlider");

    function startSlider() {
		//Step 2 Replace {26EC0E08-3D8A-4C67-ABF5-909D572B3030} with the ID of your picture library
        var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>{26EC0E08-3D8A-4C67-ABF5-909D572B3030}</listName> \
                         <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
                           </ViewFields> \
                        </viewFields> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";
        $.ajax({
            url:  "//"+window.location.hostname+L_Menu_BaseUrl+"/_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
    };
    function processResult(xData, status) {

		//Uncomment the following line to see the raw xml received from lists.asmx
		//$("#rawXml").text(xData.responseText);

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

			//Get relevant field values
			imageUrl="//"+window.location.hostname + "/" + $(this).attr("ows_FileRef").split(";#")[1];
            var description=getDescription( $(this).attr("ows_MetaInfo"));
			var title=$(this).attr("ows_Title");

			//Construct required HTML Markup
			var liHtml = "<li><h3>" + title + "</h3>" ;
			liHtml+="<IMG border=0 alt='" + title + "'src='" + imageUrl + "' >";
			liHtml+="<p>" + description + "</p>";
			liHtml+="</li>";

			//Add markup as line item in UL tag
            $("#imagesUL").append(liHtml);
        });

		//Start Slider
		//For full options, refer to http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
		$("#slider").easySlider({
			auto: true,
			continuous: true,
			controlsShow : false,
			speed : 800,
			pause : 4000
		});

		}
	function getDescription(metaInfo)
	{
		var description="";
		if(metaInfo!=null)
		{
			metaParts=metaInfo.split("\n");
			if(metaParts!=null && metaParts.length>0)
			{
				var i=0;
				do
				{
					if(metaParts[i].indexOf("vti_description")>-1)
					{
						var descParts=metaParts[i].split("|");
						if(descParts!=null && descParts.length>1)
						{
							description=descParts[1];
						}
					}
					i++;
				} while (i<metaParts.length && description=="" );
			}
		}
		return description;
	}
</script>
<style type="text/css">
#slider{border-bottom:2px solid #ccc; background:#eee; padding:5px;	font-size:x-small;}
#slider h5{font:italic medium Georgia, Times, serif; color:#555; padding:3px; margin-bottom:-10px; background:#c6c6c6;}
#slider h5 span{text-transform:lowercase; padding:5px; font:x-small normal Arial, Helvetica, san-serif;}
#slider div {font-size: x-small; padding:3px;}
#slider ul, #slider li{margin:0; padding:0; list-style:none;}
#slider li{width:310;	height:400px; overflow:hidden; padding:0px;}
#controls2 {padding:3px 0 0 0; text-align:right; width:300;}
#prevBtn, #nextBtn{}
#nextBtn{}
#prevBtn a, #nextBtn a{font-size:x-small; background-color:#ccc; color:#444; padding:2px; text-decoration:none;}
#nextBtn a{}

</style>
	<div id="rawXml" ></div>
   	<div id="slider">
		<ul id="imagesUL"/>
	</div>

Step 4: Update Code

1. Replace {26EC0E08-3D8A-4C67-ABF5-909D572B3030} by the List ID you got in step 2, above
2. Click OK, exit edit mode and Enjoy!

Notes:

1. This code is a sample code and you may need to change the styles section to match your site’s theme.
2. Please make sure all your images are of same size, if not, then please adjust the size in line 47 of source code.
3. This code assumes the size of images as 300×300 pixels, if you need to change it then update the relevant size at line 98.

All credits goes to JQuery and easy slider plugin