Dynamic Drive’s Featured Content Slider in Sharepoint

There is an updated version of this solution for SharePoint 2010 found here

I have used Dynamic Drive’s Featured Content Slider on a couple of recent projects and wanted to see if I could get it working in SharePoint. There were several key requirements:

  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.

Dynamic Drive's Featured Content Slider in Sharepoint
Featued content slider

 

The list

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.

Styling

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.

davecavins

Dave is a SharePoint developer and graphic designer based in the DC area.

23 thoughts on “Dynamic Drive’s Featured Content Slider in Sharepoint

    1. @Marc you just need to update the link to the css file in the xsl code.
      Just edit this line to point to the css file.

      <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" /> 
      
  1. Dave,

    I have this working but my problem is it wraps the body list element in tags when displaying. So it looks like test test test in plain text. Any idea for this one?

    Thank you,
    Justin

    1. @ Justin – In the xsl on line 48 you should see

       <p><xsl:value-of select="substring(@Body,1,330)"/>...</p>  

      You can change the tags to whatever you need. Also if you list is setup to use the Rich Text field for the body it will wrap the contents in a div automatically and you may need to use some additional CSS to control the display. Hope this helps.

  2. Dave –

    So far I have been unable to get this to work. When I create the data view, should I be creating a single or multiple item view? I am getting the list items to display, but it still looks like a regular multiple item view. Any thoughts? This looks like a great solution!

    Thanks,

    Zac

  3. Hello , actually i did all the steps , but i the main slider java script ( the dynamic drive ‘s one) not working at all , any idea how to reference it correctly

    1. @Mnabi Try putting the link to the script in the master page just to be sure it is working properly. Also make sure the JavaScript in the XSL is not getting stripped out because some times SharePoint Designer will remove it.

    1. @DD in the list there is a choice column called “Style” where you can choose a style. In the XSL I apply the name of whatever style was chosen to a div tag. The style names cannot have spaces. In the CSS I just apply different styles to the classes (Green_Style Red_Style, etc.) Hope this helps.

  4. Hi Dave
    I have implemented this without much drama, love it! The only thing that is occuring is when I use the next or previous buttons on the page the refresh isn’t instant and I get 2 of the list items on the page at once. Currently viewing in IE6 and IE7 and behaviour is in both browsers.
    Thanks.

    1. @RS this seems like it may be an issue with the JavaScript not working properly. Make sure the elements in your XSL have the right class names and that the script files are linked properly.

  5. Hi Dave,

    Can you please let us know, if this works for SharePoint 2010 as well ?

    Also, if you could share the code (Export) for your webpart that would greatly help me

    Thanks.

  6. @Alejandro – I have not tried it in 2010 yet. If the links are wrong check lines 46 and 49 of the xsl style sheet and be sure your list is setup using the right column types.

    @Ricardo – As soon as I get a chance to try this in 2010 ill update this post.

  7. This looks like a great solution but i am having trouble figuring out what to put where. Are there any additional instructions or documentation available? Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *