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