jQuery Nivo Slider Web Part from a SharePoint List

jQuery Nivo Slider Web Part from a SharePoint List

Posted by on Wednesday, October 30th, 2013  

 

Quality, reusable, customizable SharePoint sliders are frustratingly few and far between. So, what if you could create a jQuery Nivo slider from a SharePoint 2013, 2010 or O365 List using only out of the box functionality (and a single file in your Style Library) – allowing anyone to deploy a custom slider simply by adding a standard list Web Part to a SharePoint page?

jQuery Nivo Slider Web Part from a SharePoint list

Figure 1: a custom jQuery Nivo slider driven by a SharePoint list

Nivo slider is the industry standard, and understandably so: a versatile, customizable jQuery content slider used on at least 2.5 million web sites to date. Hardly surprising, then, that SharePoint folks should want to harness the power of Nivo within SharePoint 2013 (or SharePoint 2010) without the need for custom development, and driven only by a standard SharePoint list.

This post shows how you can do just that: create a simple, reusable, customizable jQuery Nivo slider from a SharePoint list. The full, customizable SharePoint jQuery Nivo slider XSLT is provided at the end of the post.

This out of the box XSLT approach has some major advantages relative to using heavier weight scripting (in the form of CSOM or SPServices) that may be used to query a SharePoint list and construct a slider. It is also just as easy to implement – and far simpler to customize – than the out of the box Content Search Web Part slider Display Templates available in SharePoint 2013. My approach:

  • uses out of the box functionality: a SharePoint list and simple configuration using views.
  • is reusable. Create a slider from any list or list view containing the required columns.
  • is end-user friendly. Just add a list to a page. There are no Content Editor Web Parts to delete or edit accidentally.

A note of caution: before committing to this simple, customizable Nivo slider for SharePoint, consider that an approach such as Mark Rackley’s SPServices-based slider may be preferable, depending on your requirements and the architecture of your environment. For example, if you want to query content across sites and/or across domains, SPServices will be a better way to go. Having said that, the excellent Lightning Conductor Web Part from Lightning Tools can completely circumvent the cross-Web App, cross-domain issue, placing this solution firmly back in the game as a solid farm-wide solution for more complex SharePoint environments. I would recommend you review both approaches and see which matches your requirements and farm constraints most closely.

Assuming that your display page and content list live within, or are accessible from, the same SharePoint site (a reasonable assumption) here’s how to create a simple, out of the box, reusable Nivo slider from a SharePoint list.

1. Create a simple SharePoint list to contain the rich content you wish to rotate through your customizable jQuery Nivo Slider.

For larger-scale, multiuse implementations, I recommend the creation of a jQuery Nivo slider content type to create reusable and customizable jQuery Nivo slider solutions across your SharePoint environment. If using the nifty “Publishing Image” column (Figure 2) is not a priority for your users, in 2013 you might consider the out of the box Promoted Links list type which includes, natively, “Description” (caption) and image fields. Doing so will save additional work managing content types, but the trade-off is your slider will now include a mandatory link URL field and users will have to input the URL of their image directly, rather than browse to its SharePoint location.

Columns required for the SharePoint Nivo slider list in this example are:

  • Image (type: “publishing image”) – a SharePoint column that will provide images to the custom SharePoint jQuery Nivo Slider.
  • ImageCaption (type: “multiple lines of text” allowing rich HTML content) – a SharePoint HTML column that provides the image caption to your custom jQuery Nivo slider.

And that’s it. These are the only two mandatory columns in the SharePoint list that will form the basis of our customizable jQuery Nivo slider. You may wish to create, in addition, columns such as “sort order”, or “expiration date” to control more subtly the display of specific images and rich HTML content from your SharePoint list within your jQuery Nivo slider. The beauty here is that SharePoint list views can then be used to customize the appearance of your slider in terms of ordering, filtering and so forth.

jQuery Nivo Slider Web Part from a SharePoint list

Figure 2. The “Publishing Image” column type is a convenient choice giving the option to browse to a SharePoint library for image selection, and to select a particular predefined rendition (size variant) of an image.

The next step – and this is where the magic happens! – is to create a simple XSLT transformation that will convert your SharePoint list into a custom SharePoint jQuery Nivo slider.

Note that this file is created only once, placed in your Style Library, and need not be touched again, no matter how many different sliders you want to add to your sites.

2. Create a new XSLT file in Visual Studio or a text editor of your choice. Add the HTML and XSLT markup for your custom SharePoint Nivo slider. Assuming that your fields are named, as above, “Image” and “ImageCaption”, this code creates the required structure for the Nivo Slider images:

<div class="slider-wrapper">
     <div id="slider" class="nivoSlider">
        <xsl:for-each select=".//*">
          <xsl:variable name="num" select="position()"/>
          <xsl:variable name="source" select="substring-before(substring-after(@Image,'src=&quot;'),'&quot;')" />
          <xsl:text disable-output-escaping="yes"><![CDATA[<img src="]]></xsl:text>
          <xsl:value-of select="$source"/>
          <xsl:text disable-output-escaping="yes"><![CDATA[" title="#]]></xsl:text>
          <xsl:value-of select="$num"/>
          <xsl:text disable-output-escaping="yes"><![CDATA[" />]]></xsl:text>
        </xsl:for-each>
      </div>
    </div>

Now, let’s add the captions from our SharePoint list to our Nivo Slider images. Add the following to your XSLT file:

    <xsl:for-each select=".//*">
      <xsl:variable name="num" select="position()"/>
      <div id="{$num}" class="nivo-html-caption">
        <xsl:value-of select="@ImageCaption" disable-output-escaping="yes"/>
      </div>
    </xsl:for-each>

Close out the template by including the jQuery Nivo slider plugin and any custom CSS required to make your slider look just right. (Alternatively, link to the Nivo slider jQuery plugin separately within your master page, where the jQuery library should be loaded.) Paste the Nivo plugin JavaScript and any custom CSS for your Nivo slider inside the following tags at the end of your XSLT template:

  • Open: <xsl:text disable-output-escaping=”yes”><![CDATA[
  • Close: ]]></xsl:text>

All that remains to implement your custom SharePoint jQuery Nivo slider is to upload your XSLT file to SharePoint (e.g. to the Style Library) and add a list Web Part to the page where your slider will be displayed.

  1. Add your list to a page (Add Web Part > Apps), select your Nivo list, and then Edit Web Part. Within Web Part Properties > Miscellaneous link to the custom XSLT file we are creating here

Done. Nobody needs to see, touch or understand a thing about your XSLT/JavaScript in order to implement a slider.

jQuery Nivo Slider Web Part from a SharePoint list

Figure 3. Add in the reference to your custom XSLT within the Miscellaneous area of Web Part Properties

The code provided here creates a robust, reusable, custom jQuery Nivo XSLT SharePoint slider, which avoids heavy custom coding or the pitfalls of Script Editor/Content Editor Web Parts floating around on Web Part pages. Refer to the Nivo slider documentation for slider options and custom Nivo slider jQuery transitions as needed.

Conclusion: With a simple SharePoint 2013 list, the XSLT code required to create a custom jQuery Nivo Slider is provided below. Happy sliding!

It is worth emphasizing that if you wish to create a slider reusable across Site Collections and across Web Apps, this alone is not your solution. However, with very slight modification to the provided code, Lightning Conductor, which allows content to be aggregated across Web Apps, will get you what you’re looking for. Alternatively, consider using SPServices as a viable tool, but understand the pros and cons of this approach before committing.

Requirements checklist to produce a slider like the one shown:

  • jQuery must be loaded, ideally in the master page
  • Create a list with columns “Image” and “ImageCaption”
  • Upload the XSLT file below to the Style Library
  • Include the Nivo slider plugin (here it is integrated into the XSLT)
  • Include Nivo slider styles (here they are integrated into the XSLT)
  • Upload any images needed for the Nivo navigation elements to the Site Assets folder. In the example here, we have left and right arrow images (arrow-left.png and arrow-right.png, 53x53px), and two bullet points (bullet-on.png and bullet-off.png, 12x12px)

 

CLICK TO VIEW & COPY CODE

<xsl:stylesheet
 version="1.0"
 exclude-result-prefixes="x d xsl ddwrt"
 xmlns:x="http://www.w3.org/2001/XMLSchema"
 xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
 <xsl:template match="/">
 
 <div class="slider-wrapper">
 <div id="slider" class="nivoSlider">
 <xsl:for-each select=".//*">
 <xsl:variable name="source" select="substring-before(substring-after(@Image,'src=&quot;'),'&quot;')" />
 <xsl:text disable-output-escaping="yes"><![CDATA[<img src="]]></xsl:text>
 <xsl:value-of select="$source"/>
 <xsl:text disable-output-escaping="yes"><![CDATA[" title="#]]></xsl:text>
 <xsl:text disable-output-escaping="yes"><![CDATA[" />]]></xsl:text>
 </xsl:for-each>
 </div>
 </div>
 <xsl:for-each select=".//*">
 <div id="{$num}" class="nivo-html-caption">
 <xsl:value-of select="@ImageCaption" disable-output-escaping="yes"/>
 </div>
 </xsl:for-each>
 <xsl:text disable-output-escaping="yes"><![CDATA[<script type="text/javascript">
$(document).ready(function() {
 $('#slider').nivoSlider({
 effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
 animSpeed: 600, // Slide transition speed
 startSlide: 0, // Set starting Slide (0 index)
 directionNav: true, // Next & Prev navigation
 controlNav: true, // 1,2,3... navigation
 pauseOnHover: true, // Stop animation while hovering
 manualAdvance: false, // Force manual transitions
 prevText: 'Prev', // Prev directionNav text
 nextText: 'Next', // Next directionNav text
 randomStart: false, // Start on a random slide
 pauseTime: 10000 // How long each slide will show
 });
});
</script>
 
<style>
.nivoSlider {
 height: 355px;
 left: 0;
 overflow: visible;
 position: relative;
 top: 0;
 width: 1000px;
}
 
.nivoSlider img {
 position: relative;
 top: 0;
 left: -1px;
 max-width: none;
 width: 1000px;
 height: auto;
 max-height: 350px;
}
 
.nivoSlider {
 position: relative;
 background: url(/SiteAssets/nivo/loading.gif) no-repeat 50% 50%;
}
 
.nivoSlider img {
 position: absolute;
 top: 0;
 left: 0;
 display: none;
}
 
.nivoSlider a {
 border: 0;
 display: block;
}
 
.slider-wrapper {
 padding-top: 35px;
}
 
/* If an image is wrapped in a link */
.nivoSlider .nivo-imageLink {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 0;
 padding: 0;
 margin: 0;
 z-index: 6;
 display: none;
 background: #FFF;
 filter: alpha(opacity=0);
 opacity: 0;
}
 
/* The slices and boxes in the Slider */
.nivo-slice {
 display: block;
 position: absolute;
 z-index: 5;
 height: 100%;
 top: 0;
}
 
.nivo-box {
 display: block;
 position: absolute;
 z-index: 5;
 overflow: hidden;
}
 
.nivo-box img {
 display: block;
}
 
/* Caption styles */
.nivo-caption {
 background: none repeat scroll 0 0 #FFF;
 border-right: 5px solid #AFBD22;
 display: block !important;
 bottom: 25px;
 left: auto;
 opacity: 0.9 !important;
 overflow: visible;
 padding: 5px 10px;
 position: absolute;
 right: -23px;
 width: 450px;
 z-index: 15;
}
 
.nivo-caption p {
 margin: 0;
 color: #444 !important;
}
 
.nivo-caption a {
 display: inline !important;
}
 
.nivo-html-caption {
 display: none;
}
 
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav {
 display: block !important;
 z-index: 10 !important;
 position: relative;
 display: block;
 background: red !important;
}
 
.nivo-directionNav a {
 position: absolute;
 top: 0;
 z-index: 999;
 cursor: pointer;
}
 
.nivo-prevNav,.nivo-nextNav {
 height: 350px;
 width: 100px;
 display: block;
}
 
.nivo-prevNav {
 left: 0;
 display: block;
 text-indent: -9999em;
 z-index: 999;
 background: url(/SiteAssets/nivo/arrow-left.png) no-repeat center 125px;
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}
 
.nivo-nextNav {
 right: 0;
 display: block;
 text-indent: -9999em;
 z-index: 999;
 background: url(/SiteAssets/nivo/arrow-right.png) no-repeat center 125px;
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}
 
.nivo-prevNav:hover,.nivo-nextNav:hover {
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 filter: alpha(opacity=100);
 -moz-opacity: 1;
 -khtml-opacity: 1;
 opacity: 1;
}
 
.nivo-controlNav {
 position: absolute;
 right: 0;
 top: 353px;
 z-index: 9;
}
 
.nivo-controlNav a {
 cursor: pointer;
 background: url(/SiteAssets/nivo/bullet-off.jpg) no-repeat;
 height: 12px;
 width: 12px;
 margin-right: 3px;
 text-indent: -9999em;
 display: block;
 float: left;
}
 
.nivo-controlNav a.active {
 background: url(/SiteAssets/nivo/bullet-on.jpg) no-repeat;
 height: 12px;
 width: 12px;
 margin-right: 3px;
 text-indent: -9999em;
 display: block;
 float: left;
}
</style>
 
<script type="text/javascript">
// Paste Nivo slider plugin here
</script>
]]></xsl:text>
 
 </xsl:template>
</xsl:stylesheet>

Or you can download the code as a TXT file here and copy and paste it as needed.

 

Disclaimer
The sample scripts are not supported under any Summit 7 Systems standard support program or service. The sample scripts are provided AS IS without warranty of any kind. Summit 7 Systems further disclaims all implied warranties including, without limitation, any implied warranties of merchantability or of fitness for a particular purpose. The entire risk arising out of the use or performance of the sample scripts and documentation remains with you. In no event shall Summit 7 Systems, its authors, or anyone else involved in the creation, production, or delivery of the scripts be liable for any damages whatsoever (including, without limitation, damages for loss of business profits, business interruption, loss of business information, or other pecuniary loss) arising out of the use of or inability to use the sample scripts or documentation, even if Summit 7 Systems has been advised of the possibility of such damages.

Subscribe to RSS Feed

Sign Up for Newsletter