Slide show with captions

Setup

To get this slideshow up and running there are a few things we have to do to prepare.

1. Create a standard image library.  You can add additional fields if needed but the list needs to have all of the out of the box fields.
2. Get jQuery.  Either link to the latest version from Google or download it and put it in a location on your server.
3. Download the s3 slider plugin and put it somewhere on your server.

Querying the SharePoint List

I am using the techniques described by Jan Tielnes for querying SP lists with javascript.  Here is the code.

<script type="text/javascript" language="javascript" src="Scripts/jquery-1[1].3.2.min.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/s3Slider.js
"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>Pictures</listName> \
                         <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
                               <FieldRef Name='FileDirRef' /> \
                               <FieldRef Name='NameOrTitle' /> \
                               <FieldRef Name='FileRef' /> \
                               <FieldRef Name='ID' /> \
                               <FieldRef Name='Description' /> \
                               <FieldRef Name='FileType' /> \
                           </ViewFields> \
                        </viewFields> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";
        $.ajax({
            url: "_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
    });
    function processResult(xData, status) {
        $(xData.responseXML).find("z\\:row").each(function() {
            var urlValue = $(this).attr("ows_FileDirRef");
                                                var urlArray;
                                                var urlName;
                                                     if (urlValue == undefined)
                                {
                                urlName = "- - -";
                }
                else {
                                urlArray = urlValue.split(";#");
                                urlName= urlArray[1];
                }
                                                var thumbUrl = $(this).attr("ows_NameOrTitle");
                                                var thumbArray;
                                                var thumb;          

                                                     if (thumbUrl == undefined)
                                {
                                thumb = "- - -";
                }
                else {
                                thumbArray = thumbUrl.split(".");
                                thumb= thumbArray[0];
                }
            var liHtml = "<li class='s3sliderImage'><img src='/" + urlName + "/_w/" + thumb +"_" + $(this).attr("ows_FileType") + ".jpg'/><span><a href='" + urlName + thumb + "." + $(this).attr("ows_FileType") + "'>View Larger</a><h3>" + $(this).attr("ows_Title") + "</h3>" + $(this).attr("ows_Description") + "</span></li>";
            $("#s3sliderContent").append(liHtml);
        });
        $('#s3slider').s3Slider({timeOut: 4000 });
}
</script>
<div id="s3slider" >
   <ul id="s3sliderContent" />
</div>

Configuring the query.

In the code above I am querying a list named ‘Pictures’ and returning the title, link to the file, file name, file type, description and the ID. To change the name of the list just update this tag with the appropriate list name.

<listName>Name of the List you want to use</listName>

Note: If you have renamed a default Image library the name may not have actually changed from SharePoint’s perspective so double check by browsing to the list and reading the URL string.

If you want to include data from other fields in the html output just add the field names to the ‘ViewFields’ section of the soap envelope.

 <FieldRef Name='NameOfField' /> \

You will also need to add a reference to the field in the ‘liHtml’ variable. When referencing fields in the variable remember to put ‘ows_’ in front of the field name.

Remember the field name that is displayed through the SharePoint UI is not always the real field name.  In this post Heather Solomon describes a good way to find the real field names.

The CSS

I made a few changes to the CSS to set the size of the slideshow and the colors and fonts for the captions

 #s3slider {width: 450px; height: 300px; position: relative; overflow: hidden; border:1px solid #666;}
#s3sliderContent {width: 450px; position: absolute; top: 0; margin-left: 0;}
.s3sliderImage {float: left; position: relative; display: none;}
.s3sliderImage span {
   position: absolute;
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 5px 13px;
   width: 449px;
   background-color: #fff;
   filter: alpha(opacity=70);
   -moz-opacity: 0.7;
   -khtml-opacity: 0.7;
   opacity: 0.7;
   color: #000;
   display: none;
   top: 0;
}
.s3sliderImage span h3{margin:1px;	padding:1px; font:normal italic 18px/14px Georgia, serif;}
.s3sliderImage span a{float:right;color:#fff;background:#333;padding:2px;text-decoration:none;margin-top:5px;}
.clear {clear: both;}

Download all the the code in a .dwp here

Related posts:

1. Annoucements Slider using SP Web Services
2. Adding Suggestions to the Sharepoint search box : Part 2
3. SharePoint Vertical News Ticker

Installation

4 simple steps.

1. Paste the code below into a Content Editor Web Part (CEWP) on your page.
2. Change the link to jQuery if needed. The code references the jQuery library on Google Code so if you are working in an isolated environment or already have jQuery on your server just change the link (its on the first line).
3. Put the Easy Slider code in a document library and adjust the link to it on the second line of the code.
4. Update the CSS to match your site (The CSS can be moved to an external file or added to your custom theme).

Code

Download the .dwp here

/*Link to jQuery change this to point to where you have the jQuery files */
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
/*Change this to point to the plugin file on your sever */
<script type="text/javascript" src= js/easySlider1.5.js></script>
<script type="text/javascript">
       $(document).ready(function() {
        var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>Announcements</listName> \
                         <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
                               <FieldRef Name='Body' /> \
                               <FieldRef Name='ID' /> \
				<FieldRef Name='FileDirRef' /> \
                           </ViewFields> \
                        </viewFields> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";

        $.ajax({
            url: "_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
    });

    function processResult(xData, status) {
        $(xData.responseXML).find("z\\:row").each(function() {
        	var teaser = $(this).attr("ows_Body");
        	var teaserText = teaser.slice(0,500);
        	var urlValue = $(this).attr("ows_FileDirRef");
			var urlArray;
			var urlName;
			     if (urlValue == undefined)
	    	{
      		urlName = "- - -";
        	}
        	else {
        		urlArray = urlValue.split(";#");
        		urlName= urlArray[1];
        	}

            var liHtml = "<li><h5>"	+ $(this).attr("ows_Title") + "</h5><p>" + teaserText +
            "<br/><a class='readMore' href='/" + urlName + "/Dispform.aspx?ID=" + + $(this).attr("ows_ID") + "'>Read More<a/></p></li>";
            $("#tasksUL").append(liHtml);
        });
        $("#slider").easySlider({
			controlsBefore:	'<div id="controls2">',
			controlsAfter:	'</div>',
			auto: true,
			continuous: true,
			//vertical: true,
			prevText: '< Prev',
			nextText: 'Next >',
			speed: 1000,
			pause: 4000
			});
        }
</script>
<style type="text/css">
#slider{font-size:x-small; background:#E2EFFF;}
#slider h5{padding:5px; font-size:small; color:#315F9B; letter-spacing:-1px; line-height:20px;margin:0px;}
#slider div {font-size: x-small; padding:0px; margin:3px;}
#slider ul, #slider li{margin:0; padding:0; list-style:none;}
#slider li{width:600px;	height:241px; overflow:hidden; padding:0px;}
#controls2 {padding:3px 0 0 0; text-align:right; width:600px;}
.readMore {margin:3px;padding:2px;background:#F7FBFF;}
#prevBtn, #nextBtn{}
#nextBtn{}
#prevBtn a, #nextBtn a{font-size:x-small;}
#nextBtn a{}
</style>
   	<div id="slider">
		<ul id="tasksUL"/>
	</div>

Enjoy

Notes
Announcements with really long bodies will get cut off because the div that holds the contents has a fixed height. This can be adjusted in the CSS. Long titles could also cause a problem if they wrap to multiple lines. One other thing to watch out for is inline styles applied by the WYSIWYG editor on the body of the announcement. They can override the default styles and cause items to look different.

Changing whats displayed
To change which fields are displayed edit the section and add a tag for the fields you want to reference. If you have customized your list or renamed fields the names that appear on the column headings and on the list settings page may not be correct. The fastest way to find the real name of a field is to go to the list settings page and click on the name of the column to edit it. On the edit page look at the very end of the URL and it will say Field=[real name of your field].

Once you have edited the added the all you need to do is edit the liHtml var to include the new field in the output html. To show the field just use this $(this).attr(“ows_MyFieldName”).

Upate
New Stlyes for the slider. A little less grey and will match better with a default SharePoint theme

<style type="text/css">
#slider{font-size:x-small; background:#E2EFFF;}
#slider h5{padding:5px; font-size:small; color:#315F9B;
letter-spacing:-1px; line-height:20px;margin:0px;}
#slider div {font-size: x-small; padding:0px; margin:3px;}#slider ul, #slider li{margin:0; padding:0; list-style:none;}#slider li{width:600px;	height:241px; overflow:hidden; padding:0px;}#controls2 {padding:3px 0 0 0; text-align:right; width:600px;}.readMore {margin:3px;padding:2px;background:#F7FBFF;}#prevBtn, #nextBtn{}#nextBtn{}#prevBtn a, #nextBtn a{font-size:x-small;}#nextBtn a{}</style>

Conclusion
This is very basic but provides some nice functionality and can be easily styled to match your site. Because it uses the web service instead of a data view webpart it is portable and will work on any site with an announcements list. With some more work on the JavaScript it would be simple to limit the amount of text from the body that is displayed.

Related posts:

1. SharePoint Vertical News Ticker
2. Image Slideshow with captions
3. Dynamic Drive’s Featured Content Slider in Sharepoint