Using jCarousel in SharePoint sites
Posted by zieglers on June 8, 2010
Recently i was experimenting with jQuery and was thinking how to apply it on some SharePoint scenarios. I must say that more I dive into jQuery, more impressed i am with its capabilities. There are many ways of using jQuery for SharePoint.
In this post, as a starting point, i’ll try to explain a control called jCarousel for SharePoint.
Carousel is a web component which allows you to browse through a set of items in groups. It’s called carousel since when you click left and right arrows it gives you the feeling that it’s turning. Usually it’s used for previewing photos.
jCarousel is using jQuery technology to give that turning look and feel. However in order to make it SharePoint friendly, you have to go thru some steps.
Enabling jQuery for SharePoint
Eventhough technique i’ll mention here is documented in this post, it’s not specific to jCarousel. It acts as a jQuery infrastructure for SharePoint.
Actually, idea is really simple. In order to run jQuery in SharePoint pages, jQuery library must be referenced in page headers. Once jQuery library is referenced, functions in that library can be called anywhere within that page.
Since SharePoint is controlling page rendering, you have no option of editing those pages and including your reference between html head tags of that page. So, how do we do that?
Firstly, we create a controltemplate which holds reference information to jQuery library.
Secondly, we implement an additional page header and render our control template using that code.
Thirdly, we create a site-scoped feature to activate/deactivate jQuery for site collections.
Before we finalize infrastructure details, we need to put actual jQuery library in 12 hive. I picked Layouts/jQuery folder for this. This folder will keep jQuery libraries and any jQuery related files.
Now, we are done. Our feature to enable jQuery for SharePoint is ready. All we need to do is to activate the feature on site collections where we want to enable jQuery.
Using jCarousel in SharePoint
Once jQuery is activated for a site collection, controls using jQuery can easily be used in pages. Here is how you can use jCarousel in SharePoint pages:
jCarousel is actually an unordered list (<ul> tag in html) which contains some list items (<li> tag in html). In this example those list items will be images which can be retrieved from picture library. Also we wrap list items with a asp.net repeater control so that we can bind image urls dynamically.
So, jCarousel html looks like this:
And you can bind images to jCarousel as follows:
In above code snippet, we create a datatable with a column called ItemUrl, then we loop thru MyPicZ picture library in current web object and add urls to datatable. Finally we bind datatable to repeater control.
That concludes this post. In the end we have jCarousel control working in a SharePoint page.