Geeks With Blogs
Fringe SharePoint Continued

 

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:

SPNivo

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/

NivoSlider

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.

StyleLibrary         Stylesheets       ThemesFolder                 

                        Style Library/NivoSlider                                              Style sheets                                                    Themes Folders                                                 

ThemeFiles           Scripts

                 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.

BannerImages

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.

WebPartProperties

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.

ThemeWPP

Effect

There are numerous transition effects. I decided to make it configurable.

EffectWPP

 

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.

PascalBannerRotator

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!

Posted on Wednesday, February 22, 2012 1:23 AM | Back to top


Comments on this post: Nivo Slider In SharePoint 2010!?!

# re: Nivo Slider In SharePoint 2010!?!
Requesting Gravatar...
This looks absolutely great! I would DEFINITELY be interested in seeing a detailed step-by-step with code on how you implemented this. Great job!
Left by Troy on Mar 05, 2012 11:07 AM

# re: Nivo Slider In SharePoint 2010!?!
Requesting Gravatar...
can you publish the webpart please ?
Left by suleyman on Mar 08, 2012 3:46 AM

# re: Nivo Slider In SharePoint 2010!?!
Requesting Gravatar...
I am very interested in the implementation. Is there any coding of webpart needed for this?
Left by Lawrence on Mar 13, 2012 5:46 PM

# re: Nivo Slider In SharePoint 2010!?!
Requesting Gravatar...
This looks absolutely great! I would DEFINITELY be interested in seeing a detailed step-by-step with code on how you implemented this. Great job!
Left by Klim on Mar 17, 2012 3:09 AM

# re: Nivo Slider In SharePoint 2010!?!
Requesting Gravatar...
I would also be interested in seeing the code.
Left by MLK on Mar 28, 2012 9:44 AM

# re: Nivo Slider In SharePoint 2010!?!
Requesting Gravatar...
I'd definitely be interested in seeing the code for the webpart as well. I currently have a content editor webpart pulling my code in from a text file and I'm getting mixed content errors from the javascript included. (HTTPS: site)..
Left by Marcus B. on Apr 02, 2012 3:02 PM

# re: Nivo Slider In SharePoint 2010!?!
Requesting Gravatar...
I second that. I would love a more in-depth post!
Left by Robin on Apr 05, 2012 1:46 PM

Your comment:
 (will show your gravatar)


Copyright © juanlarios | Powered by: GeeksWithBlogs.net