Zieglers

Just little about C#, .NET, SQL Server, SharePoint and SAP

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.

zieglers

Advertisements

2 Responses to “Using jCarousel in SharePoint sites”

  1. haltindag said

    Hi Ziegler,

    I tried to follow your steps but i could not retrieve the imageUrl from my list.

    Can you PLEASE provide us your original WebPart you used in Visual Studio?

    Thanks for your help

    Husso

  2. haltindag said

    Hi Ziegler,

    ok I can now get images displayed.
    I have one another problem i hope you have a solution;

    My problem is: if i click on images it should then link to link as below.
    What i think is: create a column in Picture Library and copy/paste the url(eg.
    http://www.google.com) and reference this url


    <img src="” width=”100″ height=”100″ alt=””/>

    Can you please think of a workaround for that? or have a better idea ?

    Thanks

    Husso

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: