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

AnythingSlider in SharePoint

Setup

To get this working in SharePoint you will need to make sure you have a reference to jQuery in the page somewhere as well as a list for the slider to read from. For my example I am using an out of the box annoucements list.  You will also need the files for the plugin download the anythingSlider plugin from css-tricks.com.

• In SharePoint Designer add a dataview webpart to the page with any field from your annoucements list.
• Switch to code view and find the first <xsl> tag. It should be right after the closing <DatasSources> tag. 
• Right click on the tag and choose “Select Tag”. Press delete, don’t worry we will be adding in our own xsl.



• Paste the following xsl into the page where you deleted the code.

<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">&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="Rows" select="/dsQueryResponse/Rows/Row" />
		    <link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script> <script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">
        function formatText(index, panel) {
		  return index + &quot;&quot;;
	    }
        $(function () {
            $(&apos;.anythingSlider&apos;).anythingSlider({
                easing: &quot;easeInOutExpo&quot;,
                autoPlay: true,
                delay: 3000,
                startStopped: false,
                animationTime: 600,
                hashTags: true,
                buildNavigation: true,
         	pauseOnHover: true,
     	startText: &quot;Go&quot;,
     	stopText: &quot;Stop&quot;,
	navigationFormatter: formatText
            });
            $(&quot;#slide-jump&quot;).click(function(){
                $(&apos;.anythingSlider&apos;).anythingSlider(6);
            });
        });
    </script>
<div class="anythingSlider">
	<div class="wrapper">
		<ul>
		<xsl:call-template name="dvt_1.body">
			<xsl:with-param name="Rows" select="$Rows" />
			</xsl:call-template>
		</ul>
		    </div>
        </div>
	</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>
		<div class="textSlide">
<!-- display the item title and a link to the item -->
<h3><a href="/{@FileDirRef}/DispForm.aspx?ID={@ID}" title="{@Title}"><xsl:value-of select="@Title" /></a></h3>
<!-- display the body of the item  -->
	<xsl:value-of select="@Body" disable-output-escaping="yes" />
	</div>
	</li></xsl:template>
</xsl:stylesheet>
</Xsl>

• Important: Adjust the links on the code so that point to your local copies of the css easing and plugin files.

Notes

 I made a few small changes in the css file to make things work better with SharePoint.  In page.css file I deleted several of the classes so they would not interfere with SharePoint’s styles.  In the xsl I used a div with a class of  .textslide to wrap the content so I had to change that in page.css as well.  To keep long annoucements from breaking the design I set the overflow on the .textslide div to hidden. Below is the code I used in page.css.  

/*hide content that is too long */
.textSlide { padding: 10px 30px; overflow:hidden; }
.textSlide h3  { font: 20px Georgia, Serif; margin-bottom:12px; }
.textSlide h4  { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }
.textSlide ul  { list-style: disc; margin: 0 0 0 25px; }
.textSlide ul li  { display: list-item; }

 I did not make any changes to slider.css. It may be easier to just combine the tow files to keep things simple and reduce page load times.

Conclusion

The AnythingSlider plugin is lightweight, powerful and easy to customize.  Adding this type of functionality that is common on regular websites to a SharePoint site can help guide users to important information and of course make your site ‘cooler’ than the average SharePoint site. 

The code above just shows all the items in the list but once you have it working it is easy to add your own sort/filter parameters to the data view so only certain items are shown.

The slider could also be implemented to run off of the SharePoint list web service the same way I did in this post.  If you have any questions or comments feel free to post.

Related posts:

1. Anything Slider in SharePoint – Update
2. Displaying a rotating header image with caption
3. Dynamic Drive’s Featured Content Slider in Sharepoint

As I was about to finish up the project I was given some new requirements which meant that there would be two Data View Web Parts on the page and both would need to show the attachments link.  This is when the issues started.  When you have two web parts on the page using the display attachments code the second one will just show “[value of field: Attachments]” instead of the actual link.  If anyone knows a good solution for this issue please post a comment.

I want to avoid using something like this jQuery solution by Paul Grenier simply because of the performance issues it will create.

Related posts:

1. Displaying document titles as links.
2. Displaying a rotating header image with caption
3. Updating the People Picker

Setup

Using a content editor webpart build the form elements needed to collect the dates, two inputs and a search button.  Give each input a unique ID. Here is the code I used.

<script language="JavaScript">
function submitForm()
{
var startDate = document.getElementById('startDate').value;
var endDate = document.getElementById('endDate').value;
window.parent.location="default.aspx?T1=" + startDate + '&T2=' + endDate;
}
</script>
<p><div id="dateDiv" style="display:none;" class="filterBox">
<h4>Date Search</h4>
        Between
<input name="startDate" type="text" id="startDate" value="" size="15" class="dateformat-Y-ds-m-ds-d" value="">
and
<input name="endDate" type="text" id="endDate" value="" size="15" class="dateformat-Y-ds-m-ds-d" value="">
 YYYY-MM-DD
<input type="submit" name="Submit" value="Go"  onClick="submitForm();this.disabled=true;">
</div>

The class names are used to activate the date picker script but can be whatever you want. I used this date picker script from Frequecy Decoder

The submitForm() function simply takes the values from the inputs and adds them as query string variables at the end of the URL. We can now use these values to filter the list.

Filtering the Data View Web part

To filter the content of the DVWP based on the date we have to setup some parameters for the start and end dates.   Under ‘Common Data View Tasks’ just choose ‘Parameters’ for both the start and end date set the source as ‘Query String’. The query string variable will be whatever you defined in the JavaScript so in this case they are T1 and T2. Set the default value for the start date to some date impossibly far in the past and for the end date set it to something like the year 3000. This will ensure that the list will show all records if no values are passed for the start and end dates.

Then all you have to do is setup your filter based on the parameters from the query string.

You’re done.

Things to remember

The date has to be passed in YYYY-MM-DD format in order to work.

If the detault values for your start and end date parameters are not set high / low enough all records will not display when not date range is entered.

Related posts:

1. Adding Comments to a List Part 1
2. Adding Comments to a List Part 2
3. Updating the People Picker

Too Much Code

The only issue is the preview pane solution is that in environments with slow internet connections the preview pane will be almost as slow as if the user actually broswed to the display form for the item.

Although its done through AJAX jQuery is still having to load the whole DispForm.aspx and then only displaying the contents of  a specific element.  DispForm.aspx when rendered through the borwser (like most pages in SharePoint) is very code heavy with over 700 lines of code ( An Announcement List item). Reducing the amount of code jQuery has to load from the diplay form will decrease load times and make everyone happy.

Faster

Gabe Hilado and I decided to try to make it faster. The simple solution is to make your own diplay form in SharePoint Designer. First we tried creating a blank .aspx page and putting the list view webpart on it.  The reduced the amount of code on the page but I wanted it to be even faster.

The next step was to use a dataview webpart only displaying the fields we needed for the preview. The result was a page with under 100 lines of code (varies based on the item legnth). 

Below is the modified javascript.

<script src=<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js</a>" type="text/javascript"></script>
<script type="text/javascript">
function handleError() { //fn needed for IE
return true;
}
function jLoadMe(t) {//load content

$("#jLoadMe").load(t+" .ms-formtable", function(result,status,xhr) {
$("#jLoadMe h3").css("font-size","8pt");
});
}
function initjLoadMe() {//initialize page
var arrayList = $("a[href*='DispForm.aspx']");
$.each(arrayList, function(i,e){
var t = $(e).attr("href");
t = t.replace('DispForm.aspx','empty.aspx');
$(e).hover(function() {jLoadMe(t)});
});
}
$(function() {
window.onerror = handleError; //needed for IE
initjLoadMe();
});
function jLoadEdit(t) {//load content
$("#jLoadMe&quot;).load(t+" .editForm",  function(result,status,xhr) {
$("#jLoadMe h3").css("font-size","8pt");

});
}
</script>
<div id="jLoadMe" class="content"></div>

What’s going on

The code has been modified so that onhover instead of calling DispForm.aspx it calls empy.aspx. However when the item title is clicked the browser will nagivate to the traditional DispForm.aspx.

Related posts:

1. Switch List Displays with JQuery and CSS
2. Adding Comments to a List Part 2
3. SharePoint Vertical News Ticker