jQuery and jCarousel in SharePoint

I recently had to integrate jCarousel into a SharePoint web part. Since jCarousel is a plugin for jQuery, it means I also had to get jQuery integrated with SharePoint. In order to accomplish this, I followed some good feature packaging instructions found from a few different blog posts:

After figuring out how to package jCarousel and jQuery using SharePoint delegate controls, I was ready for business with the implementation of the web part.

The web part itself was nothing fancy. I used a Repeater control to generate the list item (LI) elements with the content I needed in the carousel. I wrapped the Repeater in an unordered list (UL) which was wrapped in a DIV tag that had the runat attribute set to server. So basically, I just followed the mark up instructions provided in the jCarousel documentation.

The wrapping DIV tag was used in my webpart code to initialize jCarousel. The code snippet below shows how I implemented it:

protected override void OnLoad(EventArgs e)
{
  if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(), this.ClientID))
  {
    Page.ClientScript.RegisterStartupScript(this.GetType(), this.ClientID, @"
      <script type=""text/javascript"">
        jQuery(document).ready(function() {
          jQuery('#" + carouselDiv.ClientID + @"').jcarousel({
            // Configuration goes here
            vertical: true,
            scroll: 2,
            visible: 4
          });
        });
      </script>
    ");
  }
}

2 thoughts on “jQuery and jCarousel in SharePoint”

  1. Hi Alonso

    I am new to sharepoint and trying to implement jcarousel vertical-menu in a sharepoint webpart(retrieving images and displaying images in vertical or horizontal jcarousel menu). My tools: vs2010, C#, sharepoint 2010

    Can you provide a working example or steps how/where to start?

    By the way you look much younger on the second photo(March 2011)

    Thanks for your help
    husso

  2. Husso,

    I wrote this article when I was working on a SharePoint 2007 project. I have not had to implement any recent versions in SharePoint 2010 so I am not certain where I would begin. But, I would suggest that you start by just getting the jcarousel to work (use the jcarousel documentation for that). Then finding a way to add to the necessary JavaScript files your page layout in SharePoint. Lastly, if you need to, build and deploy a custom control or web part to dynamically build the jcarousel.

    Good luck!

Leave a Reply