Кроме настроек модулей в админ панели сайта, есть настройки самих скриптов, меняя которые, можно добиться интересных и полезных эффектов.
Настройка эффектов слайдера
Откройте файл catalog/view/theme/ваша-тема/template/module/slider.tpl. Код в файле можно условно разделить на две части: код отображения самого слайдера — все, что находится внутри блока <div class="slideshow">, и вторая часть — присоединение jquery скрипта, которое начинается со строки <script type="text/javascript">. Редактировать код будем как раз во второй части.
Код слайдера с эффектами выглядит так:
<script type="text/javascript"><!--
$(document).ready(function() {
$('#slideshow<?php echo $module; ?>').nivoSlider({
effect: 'random',
slices: 15,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
directionNavHide: true,
controlNav: true,
keyboardNav: true,
pauseOnHover: true
});
});
--></script>
Выбираем нужные эффекты и добавляем внутрь скобок .nivoSlider(); Не забудьте внутрь круглых скобок поставить фигурные { } иначе слайдер не будет работать.
Эффекты:
effect: 'random', // эффект анимации слайдера, полный список приведен ниже
slices: 15, // количество анимированных элементов, например, количество квадратов для эффекта sliceDown и прочих
animSpeed: 500, // скорость смены изображений
pauseTime: 3000, // пауза между изображениями
startSlide: 0, // номер изображения, с которого начинать показ изображений, отсчет ведется с 0, то есть 0 — это первое изображение.
directionNav: true, // true — отобразить стрелки вперед-назад, false - скрыть
directionNavHide: true, // true — показывать стрелки только при наведении, false — показывать всегда
controlNav: true, // true — показать кнопки переключения слайдов, false - скрыть
keyboardNav: true, // использовать стрелки влево и вправо на клавиатуре для переключения слайдов.
pauseOnHover: true, // остановка анимации при наведении мыши.
Значения для effect:
sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft fold fade random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse
Описывать эффекты не буду, их можно посмотреть, подставляя нужное значение в код.
Настройка эффектов карусели
Редактируется в файле catalog/view/theme/ваша-тема/template/module/carousel.tpl, структура кода в файле такая же, как и у слайдера. Эффектов у карусели меньше, но они тоже могут быть полезны. Изначально скрипт карусели выглядит так:
<script type="text/javascript"><!--
$('#carousel<?php echo $module; ?> ul').jcarousel({
vertical: false,
visible: <?php echo $limit; ?>,
scroll: <?php echo $scroll; ?>
});
//--></script>
Как видите, некоторые эффекты уже есть, например, vertical: false означает, что карусель будет отображаться в горизонтальном положении, если же установить это значение в true, то она отобразится вертикально. Visible — количество элементов, видимое в карусели, это значение задается из админ панели в настройках модуля Карусель. Scroll также задается в панели управления сайтом и определяет, на сколько элементов будет прокручиваться карусель. Теперь рассмотрим другие эффекты, которые можно добавить карусели.
animation: 'slow', // скорость прокрутки элементов. Возможны значения "slow","fast", 0 (без анимации)
auto: 0, // задает интервал автопрокрутки карусели, если стоит значение 0, то автопрокрутка отключена. Если вы хотите сделать карусель с автопрокруткой, обязательно укажите это значение.
wrap: 'circular', // определяет поведение карусели по достижении последнего элемента. Могут быть значения 'last', 'first', 'both', 'circular'. Значение circular позволяет бесконечно прокручивать элементы.
Скрипт карусели с установленными эффектами:
<script type="text/javascript"><!--
$('#carousel<?php echo $module; ?> ul').jcarousel({
vertical: false,
visible: <?php echo $limit; ?>,
scroll: <?php echo $scroll; ?> ,
auto: 2,
wrap: 'circular'
});
//--></script>
В данном примере у карусели будет автопрокрутка с шагом в 2 элемента и бесконечным повторением. Если скорость анимации не задана, то по умолчанию она будет быстрой.
Многие ищут какие-то модули для того, чтобы сделать карусель с автопрокруткой, а на самом деле достаточно только немного отредактировать файл стандартной карусели, и необходимый эффект будет достигнут.