Nivo Slider Web Part

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Update 6/6/2012
This update has a enhancement to skip loading jquery it is already included on the masterpage or page layout. A property is added on the webpart which will you to skip loading the default jquery included in the web part

Update 6/3/2012
1) Fixed the data-transition issue with the web part.

2) Updated the web part to have a target url. Now users can specify a column on the image library that can contain a url to open in new window when image is clicked. I have tested this is string column.
++++++++++++++++++++++++++++++++++++++++++++++++


You can find more information about this project on http://www.sumitrawat.net/2012/05/nivo-slider-web-part.html

This project is web part implementation of nifty Nivo Slider jQuery library. If you look at the trends it seems like this library is quit popular and download trend is growing steadily. So here is the implementation of this library as SharePoint 2010 visual web part.

You can easily transform a static image library like this:

Typical SharePoint Image Library

into something awesome like this:

Nivo Image Library

 

 

 

 

 

 

 

 

Check live example of Nivo Slider here.

Let's go through some features:

1) This is a SharePoint 2010 Visual Web Part. That means this is a farm solution as oppose to sandbox solution. You can download the wsp file scoped at site collection. After activating the feature you can drop this web part on a page. You can down load the wsp package or code.

2) Most of the solution implementing javascript libraries tend to assume that the javascript libraries will be linked from master page and leave that configuration to the user. In this implementation jquery (jquery-1.7.1.min.js) and Nivo Slider library (jquery.nivo.slider.js) are included in the wsp package. If you are loading jquery in masterpage, you can optionally skip jquery loading on the web part.

3)  Users can drop this web part on any page. They can then configure the web part to any image library and this web part should be ready to use. It will not work properly with a custom library unless you have created all the fields that it is looking for.

4) This web part allows you use it with any layout page. You do not have to modify your master page. This web part include jquery library as a resource, so you do not need to download.

5) It sorts results by last modified field, so the latest content will always show up. This can be used to automatically display most fresh content without any configuration (CAML query sort order is by "modified" field).

In the current implementation, following properties are configurable:

1)Site URL: Specify the server relative path of the site where the image library is located. Eg. Let suppose your library full path is http://yourdomain/yoursubsite/yourimagelibrary/forms/allitems.aspx , then you Site Url property should be "/yoursubsite/" .

2) Image Library Name: As name suggest this is the property needs name of a image library in the sub-site you specify above. Eg. in the example above your image library will be "yourimagelibrary".

3) Count: Specify how many images to show in the slider. When you point his web part to a image library there can thousand of images, this property will basically allow you to limit number of images to show in the slider. Default value is 4.

4) Nivo Slider Theme: Nivo slider comes with 3 inbuilt themes that, you can choose any one of them for your display. Default value is "default" theme.

5) Nivo Slider Transition Effect: Nivo slider have lots of option for transitioning between images. You can apply any one of them or just leave it to "random" which will randomly pick the transition effect.

Nivo Web Part Configuration

 

 

 

 

 

 

 

 

 

 

That's it!! No need to download jQuery, no need to modify master page. You should be able to see your images rotating. For more information on Nivo Slider you can visit their site here.

Last edited Jun 8, 2012 at 8:08 PM by sumitrawat, version 8