Slyweb
На разработку сайта! Скидки 50%!

jQuery Nivo Slider

jQuery Nivo Slider

Nivo Slider обладает множеством настроек для создания эффектного рекламного ролика на сайте. Рассмотрим каждую из опций, указанных на официальном сайте, в конце всего рассмотрим пример встравивания слайдера в Joomla 1.7.

Параметры для настройки Nivo Slider

Для того, чтобы подключить Nivo Slider необходимы следующие файлы:

Указанные файлы желательно подключить в теге head, как показано ниже.

  • Код
  • Чистый код
  1.<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
  2.
  3.<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
  4.<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  5.<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  6.<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>

        

Для правильной работы слайдера необходим следующий HTML код, о дополнительных атрибутах и настройках я расскажу чуть позже.

  • Код
  • Чистый код
  1.<div id="slider" class="theme-default">
  2.<img src="/images/up.jpg" alt="" />
  3.<img src="/images/nemo.jpg" alt="" />
  4.<img src="/images/walle.jpg" alt="" />
  5.</div>

        
jQuery Nivo Slider jQuery Nivo Slider jQuery Nivo Slider jQuery Nivo Slider
Пример заголовка HTML caption with a link.
Параметр По умолчанию
Описание
effect 'random' эффект анимации, в качестве эффекта можно выбрать к примеру 'fold,fade,sliceDown'. Полный перечень смотрите в таблице, указанной ниже.
slices 15 атрибут используется для анимации с эффектом "slices"
boxCols 8 количество столбцов
boxRows 4 количество строк
animSpeed 500 скорость смены слайдов
pauseTime 3000 время отображения слайда
startSlide 0 индекс слайда, с которого происходит анимация
directionNav true направление навигации
directionNavHide true показ только при наведении
controlNav true Навигация в виде ссылок 1,2,3... далее страницы
controlNavThumbs false миниизображения, если используется параметр Control Nav
controlNavThumbsFromRel false Атрибут rel может использоваться для отображения превью
controlNavThumbsSearch '.jpg' расширение по которому происходит поиск превью...
controlNavThumbsReplace '_thumb.jpg' ...шаблон. используемый для замены минизображения
keyboardNav true этот параметр используется для включения навигации с помощью кнопок клавиатуры (клавиш со стрелками)
pauseOnHover true этот параметр позволяет прекратить анимацию, если на него был наведён курсор
manualAdvance false Параметр, позволяющий отключить автоматическую смену слайдов
captionOpacity 0.8 уровень прозрачности заголовка слайда (свойство opacity)
prevText 'Prev' текст ссылки "next"
nextText 'Next' текст ссылки "prev"
randomStart false параметр позволяет начать анимацию с произвольного изображения
beforeChange function(){} Функция, выполняемая до того как произойдёт анимация
afterChange function(){} Функция, выполняемая после того как произойдёт анимация
slideshowEnd function(){} Функция, выполняемая после того как все слайды были показаны
lastSlide function(){} Функция, выполняемая во время отображения последнего слайда
afterLoad function(){} Функция, выполняемая когда слайдер только что загрузился

Эффекты анимации, которые позволяют сделать салайдер красивее перечислены ниже, их нужно указывать в параметре "effect":

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

Параметр по умолчанию устанавливается через jQuery:

  • Код
  • Чистый код
  1.$('#slider').nivoSlider({
  2. effect: 'fold',
  3. ....
  4.

        

Либо через атрибут тега img "data-transition". Если Вы установили эффект анимации через атрибут "data-transition", то анимация, установленная по умолчанию, будет работать для остальных изображений, но не для того изображения, которому установлен атрибут "data-transition".

  • Код
  • Чистый код
  1.data-transition="slideInLeft"
  2.


        

Nivo Slider с превью

Для включения превью необходимо установить параметр "controlNavThumbs" как true, наример:

  • Код
  • Чистый код
  1.$('#slider').nivoSlider({
  2.controlNavThumbs:true
  3.});

        

Для того чтобы превью отображалось нужно загрузить копии уменьшенных изображений, при этом копии изображений должны заканчиваться так же как их увеличенные оригиналы. но с добавлением к окончанию "_thumb.jpg".

Однако, есть и второй вариант использовать копии уменьшенных изображений - указывать в атрибуте rel путь и название изображения.

  • Код
  • Чистый код
  1.<div id="slider" class="theme-default">
  2.<img src="/images/up.jpg" alt="" rel="/images/up_thumb.jpg" />
  3.<img src="/images/nemo.jpg" alt="" rel="/images/nemo_thumb.jpg" />
  4.<img src="/images/walle.jpg" alt="" rel="/images/walle_thumb.jpg" />
  5.</div>

        

только не забудьте включить ещё и параметр "controlNavThumbsFromRel":

  • Код
  • Чистый код
  1.$('#slider').nivoSlider({
  2. controlNavThumbs:true,
  3. controlNavThumbsFromRel:true
  4.});

        

Как вставит слайдер Nivo Slider в joomla 1.7

В последнее время меня просят установить слайдер в оду из версий Joomla. Поэтому ниже я расскажу как это сделать в Joomla 1.7. Для начала вставьте в секцию head шаблона, используемого по умолчаниею, код, указанный ниже:

  • Код
  • Чистый код
  1.<?php
  2. $this->addStylesheet(JURI::root(true).'/templates/'.$this->template.'/slider/themes/default/default.css');
  3. $this->addStylesheet(JURI::root(true).'/templates/'.$this->template.'/slider/nivo-slider.css');
  4. $this->addScript('https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js');
  5. $this->addScript(JURI::root(true).'/templates/'.$this->template.'/slider/jquery.nivo.slider.pack.js');
  6. $slider = '
  7. jQuery.noConflict();
  8.
  9. var $j = jQuery;
10. $j(function(){
11. $j("#slider").nivoSlider({
12.
13. });
14. });';
15. $this->addScriptDeclaration($slider);
16.?>

        

Предыдущий пример рассчитан для шаблонов, в которых Вы вместе с слайдером подключаете jQuery с CDN Google. Поэтому будьте внимательны, если в Вашем шаблоне уже подключен jQuery, то Вам нужно заменить этот код на следующий:

  • Код
  • Чистый код
  1.<?php
  2. $this->addStylesheet(JURI::root(true).'/templates/'.$this->template.'/slider/themes/default/default.css');
  3. $this->addStylesheet(JURI::root(true).'/templates/'.$this->template.'/slider/nivo-slider.css');
  4.
  5. $this->addScript(JURI::root(true).'/templates/'.$this->template.'/slider/jquery.nivo.slider.pack.js');
  6. $slider = '
  7. $j(function(){
  8. $j("#slider").nivoSlider({
  9. });
10. });';
11. $this->addScriptDeclaration($slider);
12.?>

        

HTML код слайдера(вставьте в нужное место в шаблоне Joomla):

  • Код
  • Чистый код
  1.<div id="slider" class="theme-default">
  2.<img src="/images/up.jpg" alt="" rel="/images/up_thumb.jpg" />
  3.<img src="/images/nemo.jpg" alt="" rel="/images/nemo_thumb.jpg" />
  4.<img src="/images/walle.jpg" alt="" rel="/images/walle_thumb.jpg" />
  5.</div>

        

Не забудьте загрузить изображения, в моём случае, - изображения загружены в директорию "images".

Можно вставить не только HTML код, а модуль Joomla подназванием "Прозвольный HTML код", однако в этом случае нужно будет выполнить следующие действия:

  • Во-первых, зайти в менедже модулей
  • Во-вторых,создать новый модуль "Прозвольный HTML код"
  • В-третьих, вставить HTML код слайдера в модуль "Прозвольный HTML код" и сохранить
  • В-четвертых, указать позицию модуля "Прозвольный HTML код" и запомнить её.
  • В-пятых, вставить код указанный ниже и указатьв нём позицию модуля, которую Вы указали в предыдущем пункте.

  • Код
  • Чистый код
  1.<jdoc:include type="modules" name="nivo-slider" style="xhtml" />
  2.

        

Если Вы всё сделали правильно, то в Joomla слайдер появится на том месте, где Вы его указали в шаблоне. Пример проверялся в шаблоне поставляемом вместе с дистрибутивом Joomla - "beez5", но иногда требуется вставить слайдер в любом месте, выравняв слайдер по середине, если Вам нужно выравнять слайдер, укажите для div с id "slider" стиль "margin: 0 auto" и ширину в зависимости от ширины изображений, например установим "width: 618px", потому что все изображения на данной странице имеют именно эту ширину.

И ещё одно маленькое отступление

HTML код слайдера, а именно элемент DIV с id "slider" имеет класс "theme-default", и это не просто так, а потому что слайдер может иметь несколько стилей, которые меняются в зависимость от класса элемента DIV с id "slider", всего можно использовать три класса "theme-default", "theme-orman", "theme-pascal". Не забудьте что если Вы меняете класс то и должны подключить соответствующий css, в статье я не подключал все стили, как сделано в стандартном демо с официального сайта. Успехов и до встреч!

Загрузить архивом Nivo Slider 2.7.1

Загрузить архивом Nivo Slider для Joomla (папка со стилем и js).


Александр Ермаков