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
- Download and “install” it
- Create div with images
- Load the scripts
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
- 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. - 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.
- 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 - 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
<script type="text/javascript" src="/_layouts/jQuery/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Step Three
Now you have to actually create a div and add the images for the Nivo slider to make use of,
<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>
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
17 Comments
Trackbacks/Pingbacks
- 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! - [...] http://sp365.co.uk/2011/09/making-use-of-the-nivo-slider-in-sharepoint/ [...]
Leave a Comment
Supporters
Top Authors
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?
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?
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
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.
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
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.
Excellent, it’s not really missing the line though, I just didn’t include it
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
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.
Haha we must have posted around the same time.
Glad you got it working
Matt
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.
Yes it should be![]()
!!!A href=”">!!!img src=”" />!!!/a>
I have this in my text file, which my content editor webpart is linked to but the images aren’t “clickable”
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!!!
LOL forgot the equals symbol between href and my actual URL…
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?
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!!