I have been working on a Image slider/Content rotator web parts, page layout last month. It's obvious to investigate the trends in image sliders. I came across this nifty jquery library Nivo Slider and this certainly impressed me. If you look at the trends you will find that 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.

By using this web part you can easily transform a static image library like this:

Typical SharePoint Image Library

into something awesome like this:

Nivo Image Library

 

 

 

 

 

 

 

 

You can check more demos for Nivo Slider here.

Let's go through some of the features of this web part:
1) This is a SharePoint 2010 Visual Web Part. That means it is a farm solution as oppose to sandbox solution. This is the wsp file, you can install it at site collection solution. After activation the feature, this web part will be ready to use. I have created a codeplex project for this web part here. You can down load the wsp package or code.
2) Lot of solutions implementing javascript libraries tend to assume that the javascript libraries are linked in master page. End user is left with responsibility to put all the pieces together. In this implementation jquery (jquery-1.7.1.min.js) and Nivo Slider library (jquery.nivo.slider.js) are included in the package.
3)  Users can drop this web part on any page. They can then configure the web part to point to any image library inside any sub-site in the site collection. This web part can be dropped multiple times on the page. You can point any Image library on any site. It will show the title text as the "captions" on the images.
4) It sorts results by last modified field, so the latest content will always show up. This can be used to automatically display freshest content without any configuration.

In the current implementation, following properties are made 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/" . For root site just put "/".
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 lot of options for transitioning between images. You can apply anyone of them or just leave to default value which is "random" if you want it to randomly pick the transition effect.

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 lot of options for transitioning between images. You can apply anyone of them or just leave to default value which is "random" if you want it to randomly pick the transition effect.

Nivo Web Part Configuration

 

 

 

 

 

 

 

 

 

 

 

 

That's it!! No download of the jQuery library, no configuration of the settings, you should be able to see your images rotating. For more information on Nivo Slider you can visit their site here.

Last edited May 27, 2012 at 10:27 PM by sumitrawat, version 2

Comments

PaulFlynn Oct 18, 2013 at 2:18 PM 
Any installation instructions?