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

By Namwar Rizvi - Last updated: Sunday, February 5, 2012 - Save & Share - 10 Comments

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

Share
Posted in How To, JavaScript, jQuery • Tags: , , , , , , , , Top Of Page

10 Responses to “Quickest way to create Slide Show from your Picture Library in SharePoint”

Comment from Ann
Time June 10, 2012 at 5:18 pm

Hi,

I followed this code and it lists all my pictures in a list format. It doesn’t make the text overlap the image and rotate in a banner like format. what did I do wrong?

I’m not experienced with css, so I didn’t do anything to it because I dont know how.

Comment from Olivier
Time June 21, 2012 at 4:10 pm

Help needed!
Thanks this is very well explained. There is something I can not modify.
I only need a 711X211 banner. I did that and everything works. However, I can not get rid of the additional part, above eache of the pictures (field text for description I would guess). My question then: how to remove this small banner (grey) on the top of each pictures and then, to have a “711 X211” full picture.
Also, can I link these pictures and how?
Any help very much appreciated!

Thank you very much, Olivier

Comment from Susantt
Time June 22, 2012 at 8:30 pm

Hi Namwar, thats worked perfectly!! I was looking for this for ages, there are too many articles regarding image slideshow in sharepoint but NONE of them is so easy to understand and implement as yours!!

Many Thanks for posting it.

Comment from BRANDON MCINNIS
Time July 25, 2012 at 10:08 pm

Hi i’m having alot of trouble. Where do the rest of the image files get stored? Do i have to place the html inside the content editor source along with the code above?

Comment from BRANDON MCINNIS
Time July 25, 2012 at 10:12 pm

Sorry i’m lost with the SharePoint crossover.

Do i also upload the easy-slider package files to the document library via SharePoint and then add the rest of the html to the content editor source location?

Comment from ganesh
Time July 29, 2012 at 3:15 pm

HiNamwar

Is it works for sharepoint2010??? i tried it in sp2010, nothing to display… its works only SP2007? or both.

Comment from Muhammad Ahmed
Time August 5, 2012 at 7:17 pm

Thank you Namwar, it was really helpful post.

Comment from Alvaro
Time August 9, 2012 at 7:15 pm

Hi, I did all as you said but is not working for me, I’m using sharepoint foundation 2010 so I use a “TXT” file attached to a content editor, please help

Comment from Jennifer
Time September 19, 2012 at 10:31 pm

Has this been tested on all browsers? It works great in Firefox and IE, but it doesn’t seem to work in Chrome. Any idea how to fix it in Chrome???

Comment from SPbb
Time October 31, 2012 at 9:46 pm

Thanks for sharing this!

I wonder if you have any idea on how to use your code and to the picture thumbnail.

Write a comment