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