Установка слайдера Nivo Slider (версия 2.6.)

Загружаем Nivo Slider

Переходим на сайт плагина Nivo Slider и загружаем самую свежую версию. В статье используется версия 2.6.

Установка Nivo Slider

Чтобы использовать Nivo Slider, Вы должны включить следующее в свою страницу:

  • jQuery
  • Nivo Slider script
  • Nivo Slider CSS

Загрузка файлов Nivo Slider на сервер.

Для начала создадим на сервере папку NivoSlider. В эту папку будем закачивать файлы из архива.

В папку NivoSlider/ закачиваем: nivo-slider.css и jquery.nivo.slider.pack.js.

В NivoSlider/themes закидываем все папки и файлы из папки themes архива*.

*в каждой теме для слайдера в файле css нужно изменить путь к картинкам или загрузите их в корневой каталог вашего сайта.

Установка NivoSlider на страницу.

После того как Вы загрузили все файлы на сайт в <head> добавить следующие строки:

1. Темы оформления слайдера:

<link rel= "stylesheet" href="/NivoSlider/themes/default/default.css" type= "text/css" media= "screen" />
<link rel= "stylesheet" href="/NivoSlider/themes/pascal/pascal.css" type= "text/css" media= "screen" />
<link rel= "stylesheet" href="/NivoSlider/themes/orman/orman.css" type= "text/css" media= "screen" />

2. Таблицs css для слайдера:

<link rel= "stylesheet" href="/NivoSlider/nivo-slider.css" type= "text/css" media= "screen" />

3. Устанавливаем js для слайдера:

<script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type= "text/javascript"></script>
<script src="/NivoSlider/jquery.nivo.slider.pack.js" type= "text/javascript"></script>

4. Теперь добавляем сам слайдер на страницу в то место где вы хотите его разместить:

<div id= "slider" class= "nivoSlider">
<img src="/images/toystory.jpg" alt="" />
<a href= "http://10bukv.ru"><img src="/images/up.jpg" alt="" title= "Это пример использования текста" /></a>
<img src="/images/walle.jpg" alt="" />
<img src="/images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id= "htmlcaption" class= "nivo-html-caption">
<strong>Это</strong> пример <em>использования</em> текста <a href="#">link</a>.
</div>

Рассмотрим код подробней.

В этом коде причислены картинки для показа слайдера. Вы можете добавлять или удалять картинки из слайдера путем добавления и удаления следующего кода:

<img src="/images/toystory.jpg" alt="" />

Если Вы хотите чтобы при нажатии на картинку происходил переход на другой сайт или другую станицу добавьте код:

<a href= "http://10bukv.ru"><img src="/images/up.jpg" alt="" /></a>

Если Вам необходимо сделать надпись на картинке вставляйте код:

<a href= "http://10bukv.ru"><img src="/images/up.jpg" alt="" title= "Это пример использования текста" /></a>

Если надпись необходимокак-то  выделить, то используем следующие коды:

Для вставки текста:

<img src= "images/nemo.jpg" alt="" title="#htmlcaption" />

Для его редактирования:

<div id= "htmlcaption" class= "nivo-html-caption">
<strong>Это</strong> пример <em>использования</em> текста <a href="#">link</a></div>

Установка CSS для NivoSlider.

Затем добавляем в свой css файл следующие строки:

#slider {
position:relative;
width:618px; /* Изменить размер картинки */
height:246px; /* Изменить размер картинки */
background:url (images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}

И последнее.

Ниже нашего слайдера прописываем:

<script type= "text/javascript">
$ (window).load (function () {
$ ('#slider').nivoSlider ();
});
</script>

Изменение темы слайдера.

Пропишите в <head> (если еще не приписали):

<link rel= "stylesheet" href="/NivoSlider/themes/default/default.css" type= "text/css" media= "screen" />
<link rel= "stylesheet" href="/NivoSlider/themes/pascal/pascal.css" type= "text/css" media= "screen" />
<link rel= "stylesheet" href="/NivoSlider/themes/orman/orman.css" type= "text/css" media= "screen" />

Затем добавляем перед слаедером:

<div class= "slider-wrapper theme-default">
<div id= "slider" class= "nivoSlider">
<img src="/images/toystory.jpg" alt="" />
<img src="/images/up.jpg" alt="" title= "Это пример ипользования текста" />
<img src="/images/walle.jpg" alt="" />
<img src="/images/nemo.jpg" alt="" />
</div>
</div>

И теперь для изменения темы в коде слайдера изменяем:

<div class= "slider-wrapper theme-default">

на:

<div class= "slider-wrapper theme-Название темы">

Например:

<div class= "slider-wrapper theme-orman">

Изменение эффектов, времени перелистования и др.

За эффекты отвечает последний код, который мы вставили на страницу.

<script type= "text/javascript">
$ (window).load (function () {
$ ('#slider').nivoSlider ();
});
</script>

По умолчанию стоят следующие настройки:

<script type= "text/javascript">
$ (window).load (function () {
$ ('#slider').nivoSlider ({
effect:'random', // Specify sets like: 'fold,fade,sliceDown'
slices:15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed:500, // Slide transition speed
pauseTime:3000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, // Next & Prev navigation
directionNavHide:true, // Only show on hover
controlNav:true, // 1,2,3… navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with…
controlNavThumbsReplace: '_thumb.jpg', // …this in thumb Image src
keyboardNav:true, // Use left & right arrows
pauseOnHover:true, // Stop animation while hovering
manualAdvance:false, // Force manual transitions
captionOpacity:0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function (){}, // Triggers before a slide transition
afterChange: function (){}, // Triggers after a slide transition
slideshowEnd: function (){}, // Triggers after all slides have been shown
lastSlide: function (){}, // Triggers when last slide is shown
afterLoad: function (){} // Triggers when slider has loaded
});
});
</script>

Если Вы хотите что-то  поменять:
Например эффект смены картинки необходимо прописать:

<script type= "text/javascript">
$ (window).load (function () {
$ ('#slider').nivoSlider ({
effect:'sliceDown'
});
});
</script>

Доступные effect:

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

Подгоняем под себя.

CSS для Nivo Slider

Для того чтобы подогнать слайдер под себя основные изменения надо будет сделать в коде CSS. В файле nivo-slider.css.

Если вы новичок в кодировании CSS, то код может выглядеть для вас пугающим. Но в действительности здесь представлен достаточно простой код стиля. Все, что нужно будет сделать, это изменить размеры и изображения.

Изображения

Первым делом нужно найти и изменить изображения, которые используются в слайдере. Если вы откроете папку" /themes/название темы", то обнаружите несколько изображений, которые надо изменить:

  • arrows.png (стрелки влево/вправо)
  • bullets.png (точечный индикатор)
  • slider.png (фоновая рамка)
  • loading.gif (индикатор загрузки, по желанию)

Сохраняем наши слайды.

Слайды в демонстрации NivoSlider имеют размер 618×246. Вы можите использовать любые размеры. Если вы планируете использовать свои изображения, то они должны иметь уникальные имена, и нужно указать путь к ним в в коде слайдера.

Возврат к списку