Using Custom Skins for jCarousel in Drupal

jCarousel is a very nice slide show plug-in for jQuery. There is also a Drupal module for jCarousel.

Using jCarousel in Drupal is quite easy. After enabling jCarousel module, you just assign an ID to a list and call a PHP function jcarousel_add('#your-list-id') in your theme file or somewhere like a view's header (don't for get to choose PHP input).

But what if you want to create your own skin for jCarousel? It can be quite confusing for those who don't code much (or enough - like me) so I will explain here step by step.

  1. You have to know that the function jcarousel_add() can take up to 4 parameters (I couldn't find this in the jCarousel module's help page so I looked in the jcarousel.module file itself), $selector, $options, $skin, and $skin_path.
  2. $selector is your jQuery selector for the list you want to enable jCarousel. $options is an associative array for jCarousel configuration. The details are here. $skin is the skin name. $skin_path is your custom skin's css file path (it has to be an internal path such as "sites/all/modules/jcarousel/jcarousel/skins/tango/skin.css" for Tango skin).
  3. You need to create a wrapper element, such as div, with class="jcarousel-skin-skin_name" for your jCarousel-enabled list.
  4. You may copy and modify skin.css from the existing skins (tango or ie7). Don't forget to change the class selector .jcarousel-skin-tango or .jcarousel-skin-ie7 to your own one. This is where I got stuck -_-".
  5. Make sure that your $skin_path is correct and enjoy theming. :D

4 comments

hdmi wrote 2 years 12 weeks ago

thanks for this post.

drwierdo wrote 39 weeks 21 hours ago

Hey can you specify more clearly. I am a php noob, so i don't get it. In which file do i have to call the function? Where do I place the $selector, $options, $skin_path and $skin?

hdmi wrote 33 weeks 2 days ago

Nice post thank you

anofd wrote 21 weeks 3 days ago

Add your comment

The content of this field is kept private and will not be shown publicly.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • 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>
  • Lines and paragraphs break automatically.

More information about formatting options

Links

Recent comments