Use advanced navigation for a better experience.
You can quickly scroll through posts by pressing the above keyboard keys. Now press the button in right corner to close this window.

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() {
$(‘#slider’).nivoSlider();
});
</script>
[/sourcecode]

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=""/>
</div>
[/sourcecode]

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

18 Comments

  1. December 12, 2011  21:59 by jv Reply

    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. December 19, 2011  22:25 by Dennis Klemenz Reply

    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() {
    $('#slider').nivoSlider();
    });







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

    Any thoughts?

  3. December 30, 2011  20:16 by Matthew Hughes Reply

    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.

    Thanks
    Matt

  4. January 3, 2012  19:46 by Dennis Klemenz Reply

    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. January 3, 2012  20:06 by Matthew Hughes Reply

    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
    Thanks
    Matt

  6. January 3, 2012  20:16 by Dennis Klemenz Reply

    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.

    • January 3, 2012  20:33 by Matthew Hughes Reply

      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

      Thanks

      Matt

  7. January 3, 2012  20:50 by Dennis Klemenz Reply

    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. January 3, 2012  21:09 by Matthew Hughes Reply

    Haha we must have posted around the same time.

    Glad you got it working :)

    Matt

  9. January 3, 2012  21:22 by Dennis Klemenz Reply

    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.

    • January 3, 2012  21:40 by Dennis Klemenz Reply

      I have this in my text file, which my content editor webpart is linked to but the images aren't "clickable"










      • January 3, 2012  21:41 by Dennis Klemenz Reply

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

        !!!div id="slider" class="nivoSlider"!!!
        !!!a href"http://www.google.com"!!!
        !!!img src="/sites/test/imager/1.png" /!!!!!!/a!!!
        !!!a href"http://www.yahoo.com"!!!
        !!!img src="/sites/test/imager/2.png" /!!!!!!/a!!!
        !!!a href"http://www.cnn.com"!!!
        !!!img src="/sites/test/imager/3.png" /!!!!!!/a!!!
        !!!a href"http://www.msn.com"!!!
        !!!img src="/sites/test/imager/4.png" /!!!!!!/a!!!
        !!!/div!!!

        • January 3, 2012  21:47 by Dennis Klemenz Reply

          LOL forgot the equals symbol between href and my actual URL...

  10. Pingback : JQuery desde mi Portal con SharePoint 2010 - Parte 4 (Slider de Imágenes) - Blog de los hermanos Marchena Sekli - Tecnología Microsoft, música y mucho mas!

  11. March 27, 2012  16:10 by Marcus B. Reply

    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?

  12. March 28, 2012  21:51 by Marcus B. Reply

    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!!

Leave a reply

Your email address will not be published.

What happened to my formula?!?

This issue arose several times in my company, so I imagine others have also run into it... [Note: this article applies to both MOSS and SharePoint 2010] Here's the (simplified) sc[...]

small_keyboard