Модуль jCarousel


Модуль jCarousel позволяет создавать слайдшоу содержимого карусельного типа на основе Jquery jCarousel. Модуль интегрирует jCarousel с другими модулями Drupal, а также может использоваться самостоятельно путем ручной вставки кода в ноду, блок, тему или пользовательские модули. Для динамической загрузки содержимого jCarousel использует AJAX.
Пример ручного кода с горизонтальной каруселью
***********************
<ul class="horizontalcarousel jcarousel-skin-default">
  <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
  <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
  <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
  <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
</ul>

<?php jcarousel_add('horizontalcarousel'); ?>
************************
Для вертикальной карусели код меняется на
<?php jcarousel_add('verticalcarousel', array('vertical' => TRUE)); ?>

Для изменения скина используется свойство $options['skin']. Скин должен соответствовать одному из встроенных скинов ( default или tango ) или собственному скину, включенному  в style.css темы.
При использовании собственного скина в HTML list нужно указать класс jcarousel-skin-[skin-name], а при вызове карусели указать $options['skin path'].

Пример ручного кода с использованием скина tango
*****************************
<ul class="differentskin jcarousel-skin-tango">
  <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
  <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
  <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
  <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
</ul>

<?php jcarousel_add('differentskin', array('skin' => 'tango')); ?>
*****************************

Интеграция с Views

После добавления нового представления нужно изменить его "Стиль отображения" на "jCarousel" и затем настроить остальные параметры.

Theme function

Функция theme('jcarousel') позволяет вам легко создавать разметку и добавлять JavaScript на страницу через function call. Подобно jcarousel_add() theme function принимает параметры.
Ниже приводится пример карусели с кнопкой next, вызывающей событие при наведении на нее мыши.
Этот код должен быть помещен template.php или в модуль.
**********************
<?php
$items = array (
  0 => '<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" />',
  1 => '<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />',
  2 => '<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" />',
  3 => '<img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />',
);
$options = array (
  'buttonNextEvent' => 'mouseover',
  'buttonPrevEvent' => 'mouseover',
);
print theme('jcarousel', array('items' => $items, 'options' => $options));
?>
************************

Установка и настройка

Установка производится обычным способом. Модуль не имеет настройки.

При использовании в качестве источника Views требуется установка модулей views и ctools.