jQuery Featured Content Slider Meets SharePoint

admin

Here are the instructions for adding the jQuery Featured Content Slider to SharePoint. The content for the rotator is set up in a Custom List. There are of course different ways to reference the js and css files (masterpage, additionalpagehead placeholder of your page, etc…). This post assumes that you don’t have access to these pages and we will put the file references directly on the page through a content editor webpart.

It will look exactly like the original content slider:

jQuery Content Rotator in SharePoint

  1. Go to the jQuery Featured Content Slider instructions download the demo files.
  2. Upload the css file from the download to Sharepoint.
  3. Upload the demo images folder including the images to the same place. (I placed both the css file and the images folder in the default Shared Documents library for test purposes)
  4. Create and upload a txt file that includes the links to the jquery scripts (whether local or remote doesn’t matter). Note: if you link to the remote jquery files and you are in a secure SharePoint environment change the protocol for the two js links to start with https://
  5. Add a content editor webpart to the page that will contain the content rotator list view. Link the content editor webpart to your uploaded txt file.
  6. To create your content for the rotator, create a Custom List in SharePoint with the following required fields:
    • Title (already there)
    • Tab Thumbnail (Picture)
    • Main Image (Picture)
    • Text (Text Field, maxChar 70)
    • Pagelink (Url)
    • Order (Number)
    • Is active (Choice, values: Yes, No)List Fields for Content Rotator Custom List
  7. Go ahead and add 3 list items, using links to the demo images you uploaded.
  8. In SharePoint Designer, Add a dataview of your Content Rotator List to the page.
  9. Convert to XSLT dataview.
  10. Find the beginning <XSL> tag in this webpart and right-click, select “Select Tag”.
  11. Replace the xsl with the following new XSL. If you have your columns in the list named differently, you’ll have to adjust the xsl accordingly:

<!– custom xsl for content rotator starts here–>

<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:decimal-format NaN=””/>
<xsl:param name=”dvt_apos”>&apos;</xsl:param>
<xsl:variable name=”dvt_1_automode”>0</xsl:variable>
<xsl:variable name=”active” select=”1″/>
<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”>
<div>
<div id=”featured”>
<xsl:call-template name=”dvt_1″/>
<xsl:call-template name=”dvt_2″/>
</div>
</div>
</xsl:template>

<xsl:template name=”dvt_1″>
<xsl:variable name=”Rows” select=”/dsQueryResponse/Rows/Row” />
<ul >
<xsl:call-template name=”dvt_1.tabs”>
<xsl:with-param name=”Rows” select=”$Rows” />
</xsl:call-template>
</ul>
</xsl:template>
<xsl:template name=”dvt_1.tabs”>
<xsl:param name=”Rows” />
<xsl:for-each select=”$Rows”>
<xsl:call-template name=”dvt_1.rowviewtabs” />
</xsl:for-each>
</xsl:template>
<xsl:template name=”dvt_1.rowviewtabs”>
<xsl:variable name=”Position” select=”@Order”/>

<xsl:if test=”$active”>
<xsl:choose>
<xsl:when test=”($Position = ‘100’)”>
<li id=”nav-fragment-{@Order}”>
<a href=”#fragment-{@Order}”>
<img src=”{substring-before(@Tab_x0020_Thumbnail, ‘, ‘)}” alt=”{substring-after(@Tab_x0020_Thumbnail, ‘, ‘)}” />
<span><xsl:value-of select=”@Title”/></span>
</a>
</li>
</xsl:when>
<xsl:otherwise>
<li id=”nav-fragment-{@Order}”>
<a href=”#fragment-{@Order}”>
<img src=”{substring-before(@Tab_x0020_Thumbnail, ‘, ‘)}” alt=”{substring-after(@Tab_x0020_Thumbnail, ‘, ‘)}” />
<span><xsl:value-of select=”@Title”/></span>
</a>
</li>
</xsl:otherwise>
</xsl:choose>
</xsl:if>
</xsl:template>

<xsl:template name=”dvt_2″>
<xsl:variable name=”Rows” select=”/dsQueryResponse/Rows/Row” />

<xsl:call-template name=”dvt_1.body”>
<xsl:with-param name=”Rows” select=”$Rows” />
</xsl:call-template>
</xsl:template>
<xsl:template name=”dvt_1.body”>
<xsl:param name=”Rows” />

<xsl:variable name=”Position2″ select=”@Order”/>
<xsl:if test=”$active”>
<xsl:choose>
<xsl:when test=”($Position2 = ‘100’)”>
<div id=”fragment-{@Order}” style=””>
<img border=”0″ src=”{substring-before(@Main_x0020_Image, ‘, ‘)}” alt=”{substring-after(@Main_x0020_Image, ‘, ‘)}”/>
<div>
<h2><a href=”{substring-before(@Pagelink, ‘, ‘)}”><xsl:value-of select=”@Title”/></a></h2>
<p><a href=”{substring-before(@Pagelink, ‘, ‘)}”><xsl:value-of select=”@Text”/><span>Read more</span></a></p>
</div>
</div>
</xsl:when>
<xsl:otherwise>
<xsl:for-each select=”$Rows”>
<div id=”fragment-{@Order}” style=””>
<img border=”0″ src=”{substring-before(@Main_x0020_Image, ‘, ‘)}” alt=”{substring-after(@Main_x0020_Image, ‘, ‘)}”/>
<div>
<h2><a href=”{substring-before(@Pagelink, ‘, ‘)}”><xsl:value-of select=”@Title”/></a></h2>
<p><a href=”{substring-before(@Pagelink, ‘, ‘)}”><xsl:value-of select=”@Text”/><span>Read more</span></a></p>
</div>
</div>
</xsl:for-each>
</xsl:otherwise>
</xsl:choose>
</xsl:if>

</xsl:template>
</xsl:stylesheet>
</Xsl>

<!– custom xsl for content rotator ends here–>

A few notes:

  • I just couldn’t figure out how to filter to show only items that are marked “Is active” using a checkbox (I tried setting the xsl:if to look for the value “1”, “true”, “Yes”). Nothing worked for me. So I converted it to a choice field and the test condition worked.
  • The order field displays 1, 2,3, etc… as 100, 200, 300 (maybe because I set it to not use decimals?). It’s also reflected in the xsl above. You should check the html output in your source to make sure you also get 100, etc… If not adjust the xsl accordingly.