Making use of the Nivo Slider in SharePoint

In my previous post I talked about how we could get jQuery working in SharePoint.

In this post we will be looking at the Nivo Slider and how we can now make use of the slider which in turn uses jQuery to do its amazing work.

There are three steps to making use of the Nivo slider

  1. Download and “install” it
  2. Create div with images
  3. Load the scripts
So let’s take a look at these steps and see how easy it is.

Step One

You need to download the nivo slider and extract the zip, we are looking for “jquery.nivo.slider.pack.js” and then choose one of the following

  1. Upload to document library
    Upload the file to a document library and then use a content editor web part (CEWP) with the method Alex Pearce describes to make use of the nivo javascript file.
  2. We could also upload the file to the SiteAssets library and call it using the following
    <script type="text/javascript" src="/SiteAssets/jquery.nivo.slider.pack.js"></script>

    This will upload the file into the SharePoint database which, as I understand it, has a performance hit.

  3. Finally, we can upload the file to the server by adding the file to the following directory,
    C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\jQuery\
    This will then be stored on the file system and should be quicker to load but again, as I understand it, requires server file system access and requires duplication across your WFE’s
  4. WSP – If anyone want’s to write a post on this I would be happy to see it but my thoughts on this is that a WSP makes sense but I am not sure of the process or effort involved

Step Two

Step two and three can be done in either order but this is just the order I choose.
You need to now call the script you have added, in my example I use method three and add the script to the file system therefore, my script looks like this (added to the <head> section.
[sourcecode language=”js”]
<script type="text/javascript" src="/_layouts/jQuery/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {

The second <script> block actually loads the nivoslider and looks for a DIV with an ID of “slider” which leads us nicely to step 3

Step Three

Now you have to actually create a div and add the images for the Nivo slider to make use of,

[sourcecode language=”css”]
<div id="slider" class="s4-notdlg">
<img src="/PublishingImages/header0.jpg" alt=""/>
<img src="/PublishingImages/header1.jpg" alt=""/>
<img src="/PublishingImages/header2.jpg" alt=""/>

As above, I create a div with the ID of “slider” not forgetting to include the “s4-notdlg” class so that the div is hidden from the dialogue box and then load three images which will then be rotated.

If I get time tomorrow, I will create a video to show this process otherwise you can give it a go and there shouldn’t be any major problems.

The developers of you that are reading will ask the question,”what if I want to create the DIV dynamically?” so the images always change and I will get to that in the next post.

Thanks for reading

Matthew Hughes

I am owner of Flucidity Ltd an Office 365 & SharePoint Consultancy based in the UK.
We develop intranets, provide training, custom branding and develop SharePoint solutions for companies of varying sizes from 2 users to 20,000.
I setup SharePoint 365 as I saw that there was a need for introductory blog posts and knew there were some fantastic authors out there who might not have time to run their own blogs and keep them updated regularly.
18 replies
  1. jv
    jv says:

    thanks for the post, it helped. However, i’m getting an error: $(‘#slider’).nivoSlider(); is not a function. I’ve tried several things like adding jquery.noConflict(); and rewriting the function to jquery(‘#slider’).nivoSlider(); and still get an error. any thoughts?

  2. Dennis Klemenz
    Dennis Klemenz says:

    Matt – I followed your test on adding javascript and it works great. However, I can’t get Nivo Slider to work on my SharePoint site.

    I uploaded the Nivo js to a document library called nivoslider. I added a Content Editor webpart and added this code in the HTML view:

    $(window).load(function() {

    I get an error on $(‘#slider’).nivoSlider() line, it says Object doesn’t support this method or property.

    Any thoughts?

  3. Matthew Hughes
    Matthew Hughes says:

    Sounds like the JSfile for the Nivo Slider isnt working, a good qay to test that it’s loaded is to use the developer toolbar in IE by pressing F12 you can then see which JS files have loaded.


  4. Dennis Klemenz
    Dennis Klemenz says:

    Thanks Matt. I added the references to my javascript (both the Nivo and JQuery) to my master page.

    I added two content editors. The first contains the javascript for the Nivo load function.

    My second content editor contains the div id slider…with references to my images.

    The Nivo slider is working but it doesn’t look anything like the demos of the slider on the Nivo page. There are 4 pictures, the text appears as “1 2 3 4″ all the way to the left (it doesn’t show the bullets centered like the demos). Also, the images shrink to about 40 pixels in height, then they expand to full size when it rolls to the next image and shrinks again.

    Thanks again for all your help – the Nivo documentation itself is REALLY lacking.

  5. Matthew Hughes
    Matthew Hughes says:

    Hey Dennis,

    Glad you made some progress with this, if you would like to customise how it looks you need to modify the JS file for the Nivo Slider and also the CSS.

    Hope that helps

  6. Dennis Klemenz
    Dennis Klemenz says:

    Matt – I resolved the previous problem by linking to the CSS provided by Nivo – it is now working as advertised. The example above is missing this line: !!!link rel=”stylesheet” href=”nivo-slider.css” type=”text/css” media=”screen” /!!!
    (I replaced the open & closing brackets with “!!!” because some websites have issues with the open & close brackets.)

    However, the next problem is related to SharePoint and the content editor. The content editor is auto-modifying the HTML code that I provided and is adding numerous of the below lines:

    “!!!div class=”nivo-slice” jquery1325617879523=”10″ style=”filter: alpha(opacity=100); width: 41px; bottom: 0px; zoom: 1; display: block; background: url(undefined) no-repeat -41px 0%; height: 100%; left: 41px”!!!!!!/div!!!
    !!!div class=”nivo-slice” jquery1325617879523=”11″ style=”filter: alpha(opacity=100); width: 41px; bottom: 0px; zoom: 1; display: block; background: url(undefined) no-repeat -82px 0%; height: 100%; left: 82px”!!!!!!/div!!!

    Not sure how to resolve this but I’ll continue to investigate – any help is greatly appreciated.

    • Matthew Hughes
      Matthew Hughes says:

      Excellent, it’s not really missing the line though, I just didn’t include it :D

      Are you sure it is the Content Editor that is modifying the code? Might be worth using a Data View Web Part to include the code and that way it shouldn’t get modified oh and the other thing I used to try was adding the code in a text file and linking that via the CEWP which then didn’t modify the code



  7. Dennis Klemenz
    Dennis Klemenz says:

    Last one about the CEWP modifying the HTML was surprisingly an easy fix. I moved the code into a text file, uploaded it and referenced that file. No more HTML modifications.

    Nivo slider is working great!! Thanks for your article as it really gave a head start on getting started.

  8. Dennis Klemenz
    Dennis Klemenz says:

    Matt – have you been able to get the Nivo slider to have clickable images? I added the HREF referenced on the Nivo support page but couldn’t get it to work on the Content Editor web part. I know it is out of scope of this article – not sure if you ran into that issue before.

      • Dennis Klemenz
        Dennis Klemenz says:

        sorry, tried using the open close tags but it didn’t work:

        !!!div id=”slider” class=”nivoSlider”!!!
        !!!a href””!!!
        !!!img src=”/sites/test/imager/1.png” /!!!!!!/a!!!
        !!!a href””!!!
        !!!img src=”/sites/test/imager/2.png” /!!!!!!/a!!!
        !!!a href””!!!
        !!!img src=”/sites/test/imager/3.png” /!!!!!!/a!!!
        !!!a href””!!!
        !!!img src=”/sites/test/imager/4.png” /!!!!!!/a!!!

  9. Marcus B.
    Marcus B. says:

    I am having the same original problem as Dennis in the 6th comment down.

    I see where he fixed it by linking the .css file using a code line. I tried this by going to the “Masterpage” link in site settings and putting the path to the library where I placed the .css in that line.

    its interesting because it fixed part of the .css but not all, I get the images transistioning correctly now, but prev and next are text and I get “123456” in the top left.

    Any idea how to fix this better than I have attempted? Where did Dennis plug in the to the .css file?

  10. Marcus B.
    Marcus B. says:

    Ok, scratch my last comment. We had to merge the theme .css with the default .css and add the class to the div.
    HOWEVER.. the jquery.nivo.slider.pack.js is causing the IE 8 mixed content error (display nonsecure items) a minute or so in to the page load. I tried changing the jQuery file form 1.7.1 to 1.5.1, this didn’t fix anything.
    One difference we have from you in the tutorial, is we placed the .txt code file and the .js files in a library on the site and are calling them from there.. would this cause the problem??
    Any help would be greatly appreciated!!


Trackbacks & Pingbacks

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>