
Модуль jCarousel
admin птн, 29/07/2011 - 11:03
Модуль 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.
Комментировать