A little while ago I was part of architecting and leading a project and one of my very talented ex-coworker was in charge of doing most of the branding. He incorporated the Nivo Slider as part of the rotating banner on the home page. It seems like Rotating banners are the thing to do for internet sites these days. I have to admit, done right, they can be quite tasteful.
Since my co-worker was in charge of doing most of the branding I did not get a great chance to see how he implemented the Nivo Slider. I decided to take this on and see how it is done. Not being a JQuery guru I felt it might be a bit stretching and a great way to dive into it. This blog post is not about the implementation specifics but to show you how I implemented it. If there is interest in how I did it, please ask and I will write a more detailed blog post about it.
What I ended up with is something like this:
What you will notice is a rotating banner, with left and right arrows, and a transparent caption section with header and description text.
Setup
What you need to do first is download the NIVO Slider code from http://nivo.dev7studios.com/
The JQuery Plug in is free! What you will get as part of the download is the JQuery Nivo Slider code, 3 Custom themes and an html demo page.
Implementation
Now you will have to upload the files to SharePoint 2010. What you are really interested in doing is uploading all the CSS, JQuery and Images to the Style Library.
Style Library/NivoSlider Style sheets Themes Folders
Theme Files Scripts
Configuration
After you have uploaded the files you need to write a web part that will reference the above files and write the HTML that is provided in the HTML Demo Page. There are some specific things that I have done to make this web part configurable.
Image Library
I created an image library called “Banner Images”. I implemented a custom content type and custom columns, to keep track of a URL, Display Order, Short Description and a Featured flag. The idea is to have the the web part display only images that are “Featured”. This image library is where end users are going to add new images for the rotating banner.
Web Part Properties
There are two main configurations I decided to expose as configurations. As part of the download there are 3 themes, Default, Orman and Pascal. Even if you don’t use them, you can at least have a way to implement new themes in the future. The other is the Transition effect. How annoying would it be if you had to edit the code every time you wanted to change the transition effect.
Theme
I implemented the dropdown with enums, unfortunately I couldn’t have an enum named “Default” as it is a C# key word, so I called it Standard.
Effect
There are numerous transition effects. I decided to make it configurable.
Conclusion
What you end up with is a configurable, extendible Rotating banner. What I have done is describe what I implemented and not so much how I implemented. The only code I wrote was the web part that writes out the html that is really already written in the html demo page that you get as you download Nivo Slider. I also wrote custom code to get all my entries from the image library so I can add it to the HTML. The last screen shot is of the banner with the Pascal Theme.
If anyone is interested in a blog post about how to actually implemented, then speak up and I will write a more detailed blog about the implementation with code samples!