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

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

Есть один замечательный модуль для вывода карусели из нод. Называется jCarousel. Этот модуль расширяет Views, позволяя выводить материалы каруселью. Но его можно использовать и отдельно, пользуясь его API. Вызов карусели происходит через темизирующую функцию:
  1. theme('jcarousel', array('items' => $images, 'options' => $options));
Размещать её можно где угодно, но лучше всего в теле модуля, или в одном из препроцессов в файле template.php вашей темы. Разместить её можно даже в шаблоне, но это крайне нежелательный подход. Сейчас рассмотрим более подробно как же эту функцию дёргать. Переменная $images - это массив изображений(или не только их), которые будут отображены в карусели. Выглядеть она может примерно так:
  1. $images = array(
  2. '<img src="/images/ocean.jpg" />',
  3. '<img src="/images/sea.jpg" />',
  4. '<img src="/images/my_car.jpg" />'
  5. );
Переменная $options - это ассоциативный массив с настройками карусели. Сейчас рассмотрим какие настройки имеет jCarousel.
  • vertical - вертикальная галлерея, или горизонтальная
  • skin - скин. По умолчанию их 2. Default и Tango. Можно добавить и свои
  • visible - количество отображаемых элементов за раз
  • scroll - количество элементов, прокручиваемых за раз
  • auto - автопрокрутка, указывается в секундах. 0 - отключить
  • navigation - включает кликабельный пейджер
  • ajax - подгрузка элементов аяксом
  • start - с какого элемента начать показ
  • offset - сколько пропустить
  • size - общее количество элементов в карусели
  • animation - скорость анимации
  • easing - эффект анимации
  • wrap - возможность зациклить карусель
  • rtl - карусель справа-налево и наоборот
Это основные настройки, обычно достаточно буквально двух-трёх. Они отвечают за визуальное отображение карусели. Есть ещё и другие настройки, нужные при дописывании своего JavaScript кода к карусели. Ну и собственно вызвать карусель можно так. Я сразу размещу его в template_preprocess_node и выведу в шаблоне ноды.
  1. function template_preprocess_node(&$vars){
  2. //Кликабельные картинки
  3. $images = array(
  4. '<a href="node/1"><img src="/images/ocean.jpg" /></a>',
  5. '<a href="node/2"><img src="/images/sea.jpg" /></a>',
  6. '<a href="node/3"><img src="/images/my_car.jpg" /></a>'
  7. );
  8.  
  9. $options = array(
  10. 'scroll' => 3, // крутить по 3 элемента за раз
  11. 'vertical' => TRUE, //карусель вертикальная
  12. 'skin' => 'tango' // скин tango
  13. );
  14.  
  15. $gallery = theme('jcarousel', array('items' => $images, 'options' => $options));
  16. //Теперь в переменной $gallery готовая html вёрстка карусели
  17. $vars['gallery'] = $gallery;
  18. }
И в в шаблоне node.tpl.php я могу отрисовать эту карусель. Отрисовывать буду только при просмотре полной ноды, не тизера.
  1. <?php if ($view_mode == 'full'):?>
  2. <div class="gallery"><?php print $gallery;?></?php></div>
  3. <?php endif; ?>
  4. </?php></?php>