Настройка эффектов слайдера и карусели в Opencart 1.5

Категория: 

Кроме настроек модулей в админ панели сайта, есть настройки самих скриптов, меняя которые, можно добиться интересных и полезных эффектов.

 

Настройка эффектов слайдера

 

Откройте файл 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 элемента и бесконечным повторением. Если скорость анимации не задана, то по умолчанию она будет быстрой.

 

Многие ищут какие-то модули для того, чтобы сделать карусель с автопрокруткой, а на самом деле достаточно только немного отредактировать файл стандартной карусели, и необходимый эффект будет достигнут.

Возможно вам также будут интересны статьи:

Tags: 

Комментарии

Аватар пользователя Александр

К сожалению слайдер с Вашими эффектами перестает работать

Аватар пользователя Asterial

покажите ваш код слайдера, возможно, не совсем правильно были вставлены эффекты

Аватар пользователя Евгений

У меня все работает отлично

Аватар пользователя Alex

Здравствуйте, у меня такой вопрос: нужно футер подправить там автор свое мыло загнал и картинку ,типа он поддержка моего сайта. Убрать оттуда сделано на опенкарт. Еще в шаблоне вставлен по задумке автора код, который пишет в лого и зачем-то в футере, да еще и подставляет фразы в тексты партнерской программы Чай мед кофе. Посмотрите пожалуйста сайт чайный-бутик.рф

Аватар пользователя Asterial

Конечно, ссылку автора удалять не очень хорошо, т.к. это может быть одним из условий бесплатного предоставления шаблона, но это уже вам решать. Удалить ссылку, скорее всего, можно в файле /catalog/view/theme/florist sense/template/common/footer.tpl
Надо удалить код, который находится между комментариями:

<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donation.
Please donate via PayPal to donate@opencart.com
//-->
<div id="powered">тут ненужный код</div>
<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donation.
Please donate via PayPal to donate@opencart.com
//-->

Можно его удалить, либо написать что-нибудь свое.

Аватар пользователя zweo.ru

Все работает ocStore 1.5.1.1! Спасибо!

Аватар пользователя garikom

Возможно ли на картинку в слайдшоу наложить текст, типа краткого описания или название продукта.
Если да то варианты реализации выложите.
Спасибо!

Аватар пользователя Asterial

Для этого лучше использовать другие модули слайдшоу, так как стандартный мало функционален. Можно попробовать, например, такой http://www.opencart.com/index.php?route=extension/extension/info&extensi...

Аватар пользователя garikom

Спасибо! Остальное всё работает на ocStore-1.5.5.1.1

Аватар пользователя Юлия

Подскажите, а как в слайдере задать порядок изображений,т.е. чтобы показывалось в том порядке, как мне надо?

Аватар пользователя Asterial

Я обычно использую этот vqmod модуль http://www.opencart.com/index.php?route=extension/extension/info&extensi... . Возле изображений появляются кнопки Up и Down, и таким образом можно менять их порядок.

Аватар пользователя Алексей

Здравствуйте. Подскажите, плиз...
Где прописываются функции content, чтоб убрать из него слайдер и поставить его отдельно?
За ранее, спасибо.

Аватар пользователя Asterial

Если, например, позиция слайдера выбрана "верх страницы", то он выводится кодом <?php echo $content_top; ?>. Если вы хотите поменять позицию слайдера, то лучше для него добавить новую позицию, т.к. "верх страницы" может понадобиться для других модулей.

Аватар пользователя Memfis

Статья супер! Долго думал как карусель оживить - и тут на тебе! Есть один вопросик: а можно заставить карусель двигаться в обратном порядке по достижении последней картинки, а потом снова в нормально по достижении первой? Так сказать "туда-сюда-обратно..."