Пример и темы Nivo Slider Вы можете посмотреть здесь.
Загружаем 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 для слайдера:
<!-- файл css для слайдера -->
<link rel="stylesheet" href="/NivoSlider/nivo-slider.css" type="text/css" media="screen" />
<!-- файл css для слайдера -->
3. Устанавливаем js для слайдера:
<!-- файлы 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>
<!-- файлы js -->
4. Теперь добавляем сам слайдер на страницу в то место где вы хотите его разместить:
<div id="slider" class="nivoSlider">
<img src="/images/toystory.jpg" alt="" />
<a href="http://dijjon.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://dijjon.ru"><img src="/images/up.jpg" alt="" /></a>
Если Вам необходимо сделать надпись на картинке вставляйте код:
<a href="http://dijjon.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. Вы можите использовать любые размеры. Если вы планируете использовать свои изображения, то они должны иметь уникальные имена, и нужно указать путь к ним в в коде слайдера.
Как совместить два и более Nivo Slide на одной странице
