Published on September 12th, 2011 | by Matthew Hughes18
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
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
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