Main content begins here

Drupal Jquery JCarousel Implementation

Sunday, January 31, 2010

A recent project put us in need of a carousel. Jcarousel provided the basics for what we needed however we had to add some additional love to get the carousel working the way the client envisioned.

We had to theme the block.tpl file for the carousel, using PHP to achieve our goal. The biggest issue we needed to address was that the carousel would need to start on the same thumbnail (depending on a page's parent) whether it was on a parent or child page. So even though jcarousel provides a way to start the carousel on a particular thumbnail, we needed a dynamic way to do that since the "home" thumbnail changes throughout the site depending on which project you are on. If you land on Parent A or on anyof Parent A's child pages, the carousel needed to start withProject A's thumbnail.

First we needed to control project parents vs. project children. We used 2 content types for this, with a selector on the child type so we could choose which project parent it belonged to. We added a CCK field to project parents allowing them to choose a carousel ordering.

Next we created a view that pulled the parents as a simple HTML list. Each parent also has a huge background photo, so we used imagecache to create a thumbnail from this for the carousel. The view was shown in a block, whose view-view-list--carousel--block.tpl.php file we themed. We loaded the node form the block:

$nodeid = (arg(0) == 'node' && is_numeric(arg(1)))?arg(1):FALSE;
$node = node_load($nodeid); $nid = $node->nid;

...and depending on the node type there was further code. If it was a child we looked for its parent.

Once we determined the parent (or found out we were already on a parent), we could grab the carousel order from the CCK field of the project we were on so we could tell jcarousel to $start on that item. We also used jquery to provide an active class to the current list item since Drupal wouldn't necessarily do that if were on a child page.

Using the technique above we were able to create a carousel that starts at an appropriate place even if we aren't specifically on that page. As long as we're on any of a project's pages, the carousel starts correctly and we can even style it as such with the addition of an appropriate active class.

You may still be able to see the carousel at in the project section.

Blog terms:

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <h2> <br> <img>
  • Lines and paragraphs break automatically.

More information about formatting options

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
GAWD...I just don't think we could live without you now for a whole 4 hours!!!!!!! Seriously. No joke. :0)
L. H., Co-Owner Balance Technology Group, Inc.
Copyright ©2001-2018 Way Cool Web Design LLC. All Rights Reserved.