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

Загружаем 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. Вы можете использовать любые размеры. Если вы планируете использовать свои изображения, то они должны иметь уникальные имена, и нужно указать путь к ним в в коде слайдера.

Отправка html письма в Outlook Как выбрать CMS и сэкономить