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:
- SharePoint jQuery Deployment Feature
- SharePoint + jQuery = Stay Here Feature
- SharePoint Slideshow Web Part
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>
");
}
}
