So, in my last post we learned how to read SharePoint list data using SPServices:

    A Dummies Guide to SharePoint & jQuery – Reading List Data With SPServices

Now, let’s add to that and create something useful. Let’s use the data we read in that blog post and create a Content Slider with it. Sound like a plan?

If you are lazy like I am, and lack creativity like I do, then third party jQuery libraries nicely help mask both of these traits. However finding the right jQuery library that works nicely with SharePoint can sometimes be tricky.

Tips for finding the right jQuery library and integrating it into SharePoint

As an extra added bonus (and at no additional charge), before we jump in and talk about the library I chose to use for the content slider allow me to give you some tips about finding the right jQuery library and integrating it into SharePoint.

Never underestimate the advantage of a well maintained library

It’s always a good sign for a library when it is actively maintained; it means you’re more likely to get support if you have problems or questions. It also means you’ll generally be able to get your hands on documentation to help you take full advantage of what the library can do. Conversely, a library without support or documentation may have hidden pitfalls that you are unaware of until you are well past the point of no return.

Test on your target browsers

There are a lot of cool jQuery libraries out there for doing charts, graphs, calendars, animations, and pretty much anything else you can think of. However, check to make sure it works for your target browser. Many libraries use styles that look bad or flat out don’t work in IE. Also, if you throw IE6 into the mix your choices fall dramatically. But really, if you are worried about IE6 you have far bigger problems than finding a good jQuery library. J Regardless, before you even download a library to play with it, make sure it works on the browsers you will be using.     

Duplicate the file structure

So, do you have a separate document library for scripts, style sheets, and images? Well… I hope you are flexible about that, at last during development. Many jQuery libraries rely on a style sheets and images all working together under some predetermined directory structure. If you separate these files into different document libraries you are making your life more difficult than it has to be. If you are dead set on all the files being in a different file structure then you might invest many hours only to discover that the library does not work in SharePoint for some other reason.

Make sure it works vanilla / be wary of styles

Which brings me to my final point, before you go to the time and effort to fully implement a jQuery library in SharePoint make sure you can at least get the library to work in SharePoint using one of the various examples that the library hopefully has provided for you. It is all too common for a jQuery library to commandeer styles that SharePoint relies on; often making your SharePoint site completely unusable. Sometimes these styles can be fixed with a couple of small tweaks, and other times it could take hours depending on the library.

Our library of choice: Awkward Showcase – http://showcase.awkwardgroup.com/

Why did I choose this library over others? Well, its transition effects look good in IE, it’s got good documentation, it’s free, and most importantly it works well with SharePoint. The only downside is that it does not look like the developers are actively supporting it anymore? Bummer… but other than that I’ve been very impressed.

So, download the library files and let’s get started.

The files

First thing we need to do is upload the Awkward Showcase files to our SiteAssets document library. Again, to make our life easier, we are going to create a “css” folder and an “images” folder to hold all of the necessary files. For my purposes I need the following files:

/SiteAssets/jquery.aw-showcase.min.js
/SiteAssets/css/style.css

I also uploaded all the images the library uses even though I may not need them all now:

/SiteAssets/images/arrows.png
/SiteAssets/images/arrows-small.png
/SiteAssets/images/black-opacity-40.png
/SiteAssets/images/ black-opacity-40.png
/SiteAssets/images/ black-opacity-60.png
/SiteAssets/images/ black-opacity-80.png
/SiteAssets/images/plus.png
/SiteAssets/images/white-opacity-40.png
/SiteAssets/images/ white-opacity-60.png
/SiteAssets/images/ white-opacity-80.png

The tweaking

So, remember how I said the style sheets can sometimes interfere with SharePoint? Well, this library is no different in that respect. Fortunately, all I had to do was delete the first 56 lines of the style sheet. So, go ahead and do that as well.

You will also need to go through and tweak the style sheet for the dimensions of your content slider. When things don’t line up quite right, arrows don’t show up, or something else is off, the first place to look is the style sheet.

The Script

Now that we have our library and all supporting files in place, and removed some of the unwanted style sheet entries, it’s time to write our script to implement the content slider in SharePoint. To accomplish this I’m going modify the script we used in the previous blog post (again that was A Dummies Guide to SharePoint & jQuery – Reading List Data With SPServices ).

As a refresher, this script reads the Name, Blog, and Picture for a speaker from my SharePoint List “Speakers”. It then just dumps that information out in a very simple table. Basically all we have to do to make this script work for our content slider is:

1. Add the proper references for the Awkward Showcase files
2. Instead of having a table as a container for our speaker data, create a div that is needed by the content slider
3. Instead of appending rows to a table with our speaker information, append divs to our content slider main div
4. Apply the Content Slider library to the main Content Slider div.

It actually turns out to be a very painless process. Our script ends up looking like the script below. 

"stylesheet" href="../SiteAssets/css/style.css" />




"showcase" class="showcase" />

As you can see, we didn't have to change much.

If you want to see the script in action you can view it here: http://www.sharepointhillbilly.com/demos/SitePages/SpeakerSlider.aspx This is also the same slider that I'm using on the main page of my blog.

There are a lot more options with the slider that I haven't even looked at and I have just barely scratched the surface with what it can do. It's times like these that I wish I was more of a designer so I could make it look really sharp. I'll leave that up to you guys though, I'll give you the tools to implement it, if you can help me make it look pretty? Deal?

Anyway, there you go… a hopefully-easy-to-implement jQuery Content Slider for SharePoint. If you want to understand what all the other options are for the slider, be sure to checkout the Awkward Group's website: http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin/ 

Interestingly enough, the above url does not work for IE, it's throwing a JavaScript error 🙂 But it seems to open fine in Chrome.

Thanks again for stopping by. I'm starting to run out of ideas for my Dummiers Guide series, so please feel free to suggest some others.