Программный вывод jCarousel

Опубликовано 2014.03.30

Есть один замечательный модуль для вывода карусели из нод. Называется jCarousel. Этот модуль расширяет Views, позволяя выводить материалы каруселью. Но его можно использовать и отдельно, пользуясь его API. Вызов карусели происходит через темизирующую функцию:

theme('jcarousel', array('items' => $images, 'options' => $options));

Размещать её можно где угодно, но лучше всего в теле модуля, или в одном из препроцессов в файле template.php вашей темы. Разместить её можно даже в шаблоне, но это крайне нежелательный подход. Сейчас рассмотрим более подробно как же эту функцию дёргать. Переменная $images - это массив изображений(или не только их), которые будут отображены в карусели. Выглядеть она может примерно так:

$images = array(
'<img src="/images/ocean.jpg" />',
'<img src="/images/sea.jpg" />',
'<img src="/images/my_car.jpg" />'
);

Переменная $options - это ассоциативный массив с настройками карусели. Сейчас рассмотрим какие настройки имеет jCarousel.

vertical - вертикальная галлерея, или горизонтальная
skin - скин. По умолчанию их 2. Default и Tango. Можно добавить и свои
visible - количество отображаемых элементов за раз
scroll - количество элементов, прокручиваемых за раз
auto - автопрокрутка, указывается в секундах. 0 - отключить
navigation - включает кликабельный пейджер
ajax - подгрузка элементов аяксом
start - с какого элемента начать показ
offset - сколько пропустить
size - общее количество элементов в карусели
animation - скорость анимации
easing - эффект анимации
wrap - возможность зациклить карусель
rtl - карусель справа-налево и наоборот

Это основные настройки, обычно достаточно буквально двух-трёх. Они отвечают за визуальное отображение карусели. Есть ещё и другие настройки, нужные при дописывании своего JavaScript кода к карусели. Ну и собственно вызвать карусель можно так. Я сразу размещу его в template_preprocess_node и выведу в шаблоне ноды.

function template_preprocess_node(&$vars){
  //Кликабельные картинки
  $images = array(
    '<a href="node/1"><img src="/images/ocean.jpg" /></a>',
    '<a href="node/2"><img src="/images/sea.jpg" /></a>',
    '<a href="node/3"><img src="/images/my_car.jpg" /></a>'
  );
 
  $options = array(
    'scroll' => 3, // крутить по 3 элемента за раз
    'vertical' => TRUE, //карусель вертикальная
    'skin' => 'tango' // скин tango
  );
 
  $gallery = theme('jcarousel', array('items' => $images, 'options' => $options));
  //Теперь в переменной $gallery готовая html вёрстка карусели
  $vars['gallery'] = $gallery;
}

И в в шаблоне node.tpl.php я могу отрисовать эту карусель. Отрисовывать буду только при просмотре полной ноды, не тизера.

<?php if ($view_mode == 'full'):?>
    <div class="gallery"><?php print $gallery;?></?php></div>
<?php endif; ?>
</?php></?php>