Skip to main content

Drupal jCarousel: implementation of a basic skin

Drupal Code Module

The Drupal jCarousel module usefully integrates the jCarousel image (or content) rotator with Drupal, and specifically with views, allowing you to populate the rotator via any view. The default skins are looking a little tired. It's an easy if slightly tedious process to create your own skin, following the example of the provided Default skin. At github we've posted a ready-to-go skin that doesn't require any images, thus sparing you the most tedious part of the work. It presents the slideshow in an extremely familiar way - more or less as the carousel is demo'd as the jCarousel site itself.


Our little demo skin is included in a tiny, one-function module we've called jCarouselSkins. If you install this module as per usual Drupal fashion, you'll find the jcBasic theme available in jCarousel "view" settings. To add your own new skins to the module, follow these two steps:

1. drag the jcFrontpage folder into the sites/all/modules/jcarouselskins/skins folder. If your theme is called Fusion, for example, your directory structure would look like jcarouselskins/skins/Fusion

2. add your skin to the configuration function, which is in fact this tiny module's only function

// line 6, jcarouselskins.module

 * Implements hook_jcarousel_skin_info().
function jcarouselskins_jcarousel_skin_info() {
  $skins = array();
  $skins['jcBasic'] = array(
    'title' => t('jcBasic'),
    'file' => 'skins/jcBasic/jcarousel-jcBasic.css',

  $skins['Fusion'] = array(
    'title' => t('Fusion'),
    'file' => 'skins/slideshow/jcarousel-fusion.css',

  return $skins;

Use Your Own Module

Of course, if you already have a custom module for your site, you don't need to install jcarouselSkins. Just invoke hook_jcarousel_skin_info(), by adding a new function to yourmodule.module:

 * Implements hook_jcarousel_skin_info().

function mymodule_jcarousel_skin_info() {
  // etc, as above

Our tiny one-function module is available at github: