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

1. User can easily add items
2. Users  can choose a style for each item
3. Expired Items must not show
4. Each item will have a Title, Body and a customizable “read more” link.

Here’s how I did it.

First I created a custom list to store the slider items.  These are the columns I used:

Title – Single Line of text
Body – Multiple Lines of text
Link URL – HyperLink
Expiration – Date and Time (expired items will not be shown)
Image – Picture
Style – Choice  (we will use this column to allow users to choose the style of each item)

On the page I used a DataView WebPart to display the Title, Body, Image and Link URL columns.   Using Sharepoint Designer I setup filtering on the expiration date.  To do this in design view right click on the data view webpart and bring up the “Common Data View Tasks ” box and choose Filter.  In the window I set the conditional statement so that items would only be shown if the expiration date was greater than today.

You can find a basic tutorial on using the DVWP here

Once we have the data we want showing on the page we need to get it into the right format.  For the Content Slider to work properly the page needs to refernce an external JavaScript file and a CSS style sheet. Additionally the Slider itself has to follow this pattern:

<div id="slider1" class="sliderwrapper">
<div class="contentdiv">Content 1 Here.
</div>
<div id="paginate-slider1" class="pagination"></div>

Basically the whole content slider has do be wrapped in a div with an ID of ‘slider1′  each of the items must be wrapped in a div with the class ‘contentdiv’.  For more explanation on this visit Dynamic Drive

SharePoint uses xsl to style the data view so we have to go into the code view and add the nessecary Javascript, CSS and div elements to make everything work. Here is the xsl I used to get everything working in the page

<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:param name="Today">CurrentDate</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" />
		<div id="slider1" class="sliderwrapper">
			<xsl:call-template name="dvt_1.body">
				<xsl:with-param name="Rows" select="$Rows" />
			</xsl:call-template>
		</div>
		<div id="paginate-slider1" class="pagination">
</div>
<script type="text/javascript">
featuredcontentslider.init({
	id: "slider1",  //id of main slider DIV
	contentsource: ["inline", ""],
	toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["Previous", "Next"],
	revealtype: "click",
	enablefade: [true, 0.2],  //[true/false, fadedegree]
	autorotate: [true, 3000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){  //event handler fired whenever script changes
		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
	}
})
</script> </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">
		<div class="contentdiv">
		<div class="{@Style}">
		<img border="0" align="left" hspace="0" vspace="0" alt="{substring-after(@Image, ', ')}" src="{substring-before(@Image, ', ')}" />
	<a href="{substring-before(@Link_x0020_URL, ', ')}" title="{@Title}">
	<h1><xsl:value-of select="@Title" /></h1></a>
	<p><xsl:value-of select="substring(@Body,1,330)"/>...</p>
	<a href="{substring-before(@Link_x0020_URL, ', ')}" class="readMoreLink" title="{substring-after(@Link_x0020_URL, ', ')}">
	<span class="readMoreIcon"><xsl:value-of select="substring-after(@Link_x0020_URL, ', ')" /></span>
	</a>
	</div>
	</div></xsl:template>
</xsl:stylesheet>
</Xsl>

For information on how to write xsl stylesheets read this post on Heather Solomon’s site. Basically using tags like this:
allows you to insert various peices of data from the list. In the xsl above I am wrapping each item with the nessacary div to make the slider work. Inside each div I am inserting the title inside an h1 tag, the first 330 characters of the body in an a p tag, and the Link URL formatted as a Hyperlink.

To make everything look good I had to customize the CSS that comes from Dynamic Drive. The code is below.

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 0px;
width: 100%; /*width of featured content slider*/
height: 231px;
}
.sliderwrapper .contentdiv{
visibility:hidden; /*leave as is*/
position:absolute; /*leave as is*/
left:0;  /*leave as is*/
top:0;  /*leave as is*/
padding: 0px;
background:#fff;
width:100%;
/*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height:100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity:1;
opacity:1;
color:#fff;
font-size:x-small;
}
.contentdiv img{
height:205px;
width:270px;
margin:10px;
border:1px solid #ccc;
}
.contentdiv h1{
color:#eee;
font:normal normal large Georgia;
margin:0px;
padding:5px 0 0 0;
line-height:20px
}
.contentdiv a:hover, .contentdiv a{
text-decoration:none !important;
padding:0px;
}
.contentdiv p{
line-height:19px;
padding:0px 10px 0px 10px;
}
a.readMoreLink {
color:#555;
padding:4px;
background-color:#fff;
}
a.readMoreLink:hover {
color:#555;
text-decoration:none;
padding:4px;
background:#fff url('link_bg.gif') repeat-x bottom center;
}
.pagination{
width: 100%;
/*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
padding: 3px 1px;
font-size:x-small;
background:#fff url('link_bg.gif') repeat-x bottom center;
border-top:1px solid #ccc;
}
.pagination a{
padding: 0 4px;
text-decoration: none;
color: #666;
background:#fff;
}
.pagination a.selected{
color: #fff;
background-color: #666;
}
.pagination a:hover{
color:#fff;
background:#666;
text-decoration:none;
}

In the XSL stylesheet each item is wrapped in a div, the class name for the div is pulled from the ‘Style’ column in the list. The make the styles work I added the following CSS to my stylesheet

.Red_Style{
height:230px;
background:#671818 url('red_bg.gif') repeat-x top center;
}
.Blue_Style{
height:230px;
background:#3A5E97 url('blue_bg.gif') repeat-x top center;
}
.Green_Style{
height:230px;
background:#4E8822 url('green_bg.gif') repeat-x top center;
}

All I am doing is changing the background image and color for each style. Because the div wraps each item it would be possible to also change font colors, font size, image position and more but I just wanted to keep it simple.

The only drawback with using the dataview webpart is that this webpart cannot be easily moved from one site to another.

Related posts:

1. Anything Slider in SharePoint – Update
2. CSS-Tricks AnythingSlider in SharePoint
3. Annoucements Slider using SP Web Services