jQuery Nivo Slider

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

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

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

• библиотека jQuery ( библиотека jQuery)
• библиотека Nivo Slider script( Nivo Slider script)
• CSS Nivo Slider( CSS Nivo Slider)
• служебные файлы Nivo Slider( CSS Nivo Slider)

 

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

<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" /> <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>

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

<div id="slider" class="theme-default"> <img src="/images/up.jpg" alt="" /> <img src="/images/nemo.jpg" alt="" /> <img src="/images/walle.jpg" alt="" /> </div>

Параметр	По умолчанию	Описание
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:

$('#slider').nivoSlider({ effect: 'fold', ....

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

data-transition="slideInLeft"

Nivo Slider с превью

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

$('#slider').nivoSlider({ controlNavThumbs:true });

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

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

<div id="slider" class="theme-default"> <img src="/images/up.jpg" alt="" rel="/images/up_thumb.jpg" /> <img src="/images/nemo.jpg" alt="" rel="/images/nemo_thumb.jpg" /> <img src="/images/walle.jpg" alt="" rel="/images/walle_thumb.jpg" /> </div>

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

$('#slider').nivoSlider({ controlNavThumbs:true, controlNavThumbsFromRel:true });

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

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

<?php $this->addStylesheet(JURI::root(true).'/templates/'.$this->template.'/slider/themes/default/default.css'); $this->addStylesheet(JURI::root(true).'/templates/'.$this->template.'/slider/nivo-slider.css'); $this->addScript('https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'); $this->addScript(JURI::root(true).'/templates/'.$this->template.'/slider/jquery.nivo.slider.pack.js'); $slider = ' jQuery.noConflict(); var $j = jQuery; $j(function(){ $j("#slider").nivoSlider({ }); });'; $this->addScriptDeclaration($slider); ?>

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

<?php $this->addStylesheet(JURI::root(true).'/templates/'.$this->template.'/slider/themes/default/default.css'); $this->addStylesheet(JURI::root(true).'/templates/'.$this->template.'/slider/nivo-slider.css'); $this->addScript(JURI::root(true).'/templates/'.$this->template.'/slider/jquery.nivo.slider.pack.js'); $slider = ' $j(function(){ $j("#slider").nivoSlider({ }); });'; $this->addScriptDeclaration($slider); ?>

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

<div id="slider" class="theme-default"> <img src="/images/up.jpg" alt="" rel="/images/up_thumb.jpg" /> <img src="/images/nemo.jpg" alt="" rel="/images/nemo_thumb.jpg" /> <img src="/images/walle.jpg" alt="" rel="/images/walle_thumb.jpg" /> </div>

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

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

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

<jdoc:include type="modules" name="nivo-slider" style="xhtml" />

Если Вы всё сделали правильно, то в 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, в статье я не подключал все стили, как сделано в стандартном демо с официального сайта. Успехов и до встреч!