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
So let’s take a look at these steps and see how easy it is.
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
- We could also upload the file to the SiteAssets library and call it using the following
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 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.
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
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=""/>
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