Rotating images with captions

Setup

1. Create an Image Library to hold your header images, I named my list ‘Headers’. You can add additional fields to the list if you want but its not necessary for this to work.
2. Find the images you want to use and re-size them to all be the same dimensions, I used 600px x 200px.
3. Upload the images to the library and fill in the meta data for each one. Just make sure the ‘Title’ field has something in it because that is what we will use for our captions.

The hard part

Ok really its not hard at all.

1. In SharePoint Designer and add a data view web part to the page. It does not matter what fields you show in the DVWP the important part is that it is pulling its contents from the Image Library you created.
2. Switch to ‘split view’ and find the tag. It should be right after the tag in the code. Right click on the tag and choose ‘Select’ tag. Press delete.
   

   Split view

   

   XSL tag

   

   Select Tag

3. Paste this code where the tag used to be.

<XSL>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
	<xsl:output method="html" indent="no"/>
	<xsl:decimal-format NaN=""/>
	<xsl:param name="dvt_apos">'</xsl:param>
	<xsl:variable name="dvt_1_automode">0</xsl:variable>
	<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
		<xsl:call-template name="dvt_1"/>
	</xsl:template>
	<xsl:template name="dvt_1">
		<xsl:variable name="dvt_StyleName">Table</xsl:variable>
		<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
		<xsl:variable name="dvt_RowCount" select="count($Rows)" />
		<xsl:variable name="IsEmpty" select="$dvt_RowCount = 0" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="sample.css?t=1" />
	<script type="text/javascript" src="captify.tiny.js"></script> <script type="text/javascript">
this.randomtip = function(){
	var pause = 9000; // define the pause for each tip (in milliseconds)
	var length = $(&quot;#headers li&quot;).length;
	var temp = -1;
	this.getRan = function(){
		var ran = Math.floor(Math.random()*length) + 1;
		return ran;
	};
	this.show = function(){
		var ran = getRan();
		while (ran == temp){
			ran = getRan();
		};
		temp = ran;
		$(&quot;#headers li&quot;).hide();
		$(&quot;#headers li:nth-child(&quot; + ran + &quot;)&quot;).fadeIn("slow");
	};
	show(); setInterval(show,pause);
};
</script> <script type="text/javascript">
	$(function(){
		$(&apos;img.captify&apos;).captify({});
	});
	$(document).ready(function(){
	randomtip();
});
	</script> <style type="text/css">
#headers, #headers li{
	margin:0;
	padding:0;
	list-style:none;
	}
#headers li img{
	display:none; /* hide the items at first only */
	}
</style>
<ul id="headers">
	<xsl:call-template name="dvt_1.body">
	<xsl:with-param name="Rows" select="$Rows"/>
	</xsl:call-template>
</ul>
	</xsl:template>
	<xsl:template name="dvt_1.body">
		<xsl:param name="Rows"/>
		<xsl:for-each select="$Rows">
			<xsl:call-template name="dvt_1.rowview" />
		</xsl:for-each>
	</xsl:template>
	<xsl:template name="dvt_1.rowview">
<li><img border="0" src="{@FileRef}" alt="{@Title}" class="captify" title="{@Title}"/></li>
</xsl:template></xsl:stylesheet></XSL>

How it works

This code displays the items from our list in an unordered list and then using the jQuery method explained here it randomly chooses one to display. Initially they are all hidden by this css.

<style type="text/css">
#headers, #headers li{
	margin:0;
	padding:0;
	list-style:none;
	}
#headers li img{display:none; /* hide the items at first only */}
</style>

You can remove this from the xsl code and put it in your own external style sheet if you want. If you look at the article on CSS Globe where I got the code from there is also a way to make it show images randomly on page refresh.To diplay the captions I am using the Captify jQuery plugin. If you notice in the xsl I am adding a class of ‘captify’ to each image, this is all the plugin needs to work. We just need to reference the plugin file and call the function like this:

<script type="text/javascript">
	$(function(){$('img.captify').captify({});
	});  //show captions on the images
	$(document).ready(function(){randomtip();
});  //display the random images
	</script>

In closing

I have seen other methods of showing random content in the Data View Web Part such as this one:

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row[@ID=ddwrt:Random(1,count(//Rows/Row))]"/>

However when I experimented with it there were issues with it choosing id’s that were not in the list and therefore nothing would display. If any one knows of an alternative solution please let me know.Overall this can be a very powerful tool for sharing information with your users. With a few small edits to the code and the list you can easily make each slide link to a page or a list item on your site.

If you have trouble getting this working on your site make sure the references to jQuery and the Captify script are correct, if they are right and you still have issues feel free to post a comment and I’ll do what I can to help out.

Resources

• jQuery
• Captify Plugin Download
• Simple Way to Random Display or Rotate Content Using JavaScript and CSS

Related posts:

1. Anything Slider in SharePoint – Update
2. Switch List Displays with JQuery and CSS
3. CSS-Tricks AnythingSlider in SharePoint

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. SharePoint Vertical News Ticker
3. Adding Suggestions to the Sharepoint search box : Part 2