Ok, after all the intro articles, after setting up the scripting resource center, after researching and dodging the bullet for the past two weeks, I’m ready to start my first jQuery and SharePoint project. I’m going to try and implement a simple, image slider solution.

This will be a multiple article solution. I will document each step of the way with screenshots and descriptions, getting the basic, simple solution working, then take feedback from the people following the series to add refinements and enhancements to the solutions.

So here goes: The EUSP Handy Dandy Image Slider Solution for SharePoint. Follow at your own risk.

The Basic Setup

To begin the project, I created a blank site. That gives me a completely empty canvas to start from. Into that site, I put a picture library to hold the images that will appear in the EUSP Image Slider. For now, I left the default columns and settings on the library, with plans to modify it through a content type if the need arises.

While I’m at it, I also deleted the advertisement for Microsoft SharePoint Services and inserted by own logo. Might as well take advantage of it while I’ve got the chance.

Selecting Images for the Slider

The holiday season left me with a lot of pictures in my camera, so I’m going to use some of those to get the ball rolling. For this project, I pulled down about a dozen images, just so I can put the solution to a solid test. The images are stored within the Resources-Images library.

I purposely left them at different sizes. One of the enhancements I’d like to implement is the ability for the solution to handle different sized images.

Selection of a jQuery Slider Solutions

I spent the past two weeks collecting resources and links for various jQuery solutions I found interesting. There are literally dozens to choose from just from one simple search. In my case, I follow Smashing Magazine, especially their twitter feed, because of the high quality of links they provide. One of those links was “13 Super Useful jQuery Content Slider Scripts and Tutorials” on the WDL site.

After looking through the selections, I chose Chris Coyier’s “AnythingSlider jQuery Plugin“. This has a ton of features already built in, so hopefully, it will be a good way to learn about the various functionality available with jQuery and sliders.

First Mistake

I downloaded the resource files from Chris’ site, popped them open and started poking around. The first thing I found was an index.php file. I don’t have php running on my laptop, so I changed the file extension to .html and opened it in my web browser. Everything worked perfectly… oh, oh, that’s NOT supposed to happen. Where’s the call to jQuery? Where are the scripts? What’s going on here?

After closer examination, I see that the resources that I’ve downloaded are CSS files and javascripts, nothing to do with jQuery! I’ve downloaded my first project for jQuery, and failed by selecting a solution that doesn’t even use it. Kind of sad, when you think about it.

Update: A deeper, deeper dive shows that Chris has implemented some jQuery in the solution so all is not lost!

What’s Next

I like Chris’ solution a lot. There is a ton of functionality there. I’m going to go ahead and implement it as well as I can just to get a feel for getting something in the “wild” transformed and working in SharePoint. I’ll still document the process and point you to his resources, since I think the first objective is to get something useful to work.

I’ll get back to you in a day or two.
Mark