Установка слайдера Nivo Slider

30 января 2013

Загружаем Nivo Slider

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

Установка Nivo Slider

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

jQuery
Nivo Slider script
Nivo Slider CSS

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

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

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

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

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

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

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

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

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

<link rel="stylesheet" href="/nivo-slider/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="/nivo-slider/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>

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

<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
    ontrolNavThumbsFromRel: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
    auseOnHover:true, // Stop animation while hovering
    manualAdvance:false, // Force manual transitions
    aptionOpacity: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. Вы можете использовать любые размеры. Если вы планируете использовать свои изображения, то они должны иметь уникальные имена, и нужно указать путь к ним в в коде слайдера.