Легкий слайдер изображений Nivo Slider (jQuery Plugin)
Default
Orman
Pascal
Поэтому в общем виде, чтобы подключить слайдер на страницах своего сайта, нужно для любой из 3-х тем:
1. Подключить между тегами
Code
<head> ... </head>
следующие файлы стилей
Code
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
для темы default дополнительно к первым двум файлам подключить файл стилей темы:
Code
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
для темы orman дополнительно к первым двум файлам подключить файл стилей темы:
Code
<link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
для темы pascal дополнительно к первым двум файлам подключить файл стилей темы:
Code
<link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
2. В самом низу кода страницы, перед закрывающим тегом
Code
</body>
для любой из выбранных тем оформления слайдера подключить скрипты:
Code
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
3. В том месте, где вы планируете разместить слайдер изображений, вставляем код слайдера:
Code
<div class="slider-wrapper theme-default"> /* оставить эту строку для темы оформления default, остальные две убрать */
<div class="slider-wrapper theme-orman"> /* оставить эту строку для темы orman, остальные две убрать*/
<div class="slider-wrapper theme-pascal"> /* оставить эту строку для темы pascal, остальные две убрать*/
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="Здесь путь к первому файлу изображения" alt="" />
<a href="Здесь какая-то ссылка"><img src="Здесь путь к второму файлу изображения" alt="" title="Это описание для изображения" /></a>
<img src="Здесь путь к третьему файлу изображения" alt="" data-transition="slideInLeft" /> /* для этого изображения всегда будет использоваться эффект slideInLeft */
<img src="Здесь путь к четвертому файлу изображения" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>Это</strong>описание изображения<em>с использованием</em> тегов и с <a href="#">ссылкой</a>.
</div>
</div>
А для того, чтобы выбрать код слайдера определенной цветовой темы, нужно из этих трех строк выбрать одну нужную, соответствующую названию темы
Code
<div class="slider-wrapper theme-default"> /* оставить эту строку для темы оформления default, остальные две убрать */
<div class="slider-wrapper theme-orman"> /* оставить эту строку для темы orman, остальные две убрать*/
<div class="slider-wrapper theme-pascal"> /* оставить эту строку для темы pascal, остальные две убрать*/
Например, если мы хотим выбрать оформление слайдера темой orman, то из этих 3-х строк останется одна:
Code
<div class="slider-wrapper theme-orman">
Как видите, всё просто, главное проследите, чтобы пути к файлам стилей, скриптов и изображений были корректно прописаны. Всё необходимое для установки вы найдете в исходниках.
Немного об оформлении изображений в слайдере.
Чтобы добавить подпись к изображению, вам нужно всего лишь добавить для него атрибут title
Code
<img src="Здесь путь к файлу изображения" alt="" title="Здесь подпись к изображению" />
Чтобы добавить подпись к изображению, содержащую HTML - элементы (например,ссылку), нужно для изображения в атрибуте title указать название ID элемента, содержащего подпись.
Например, имеем изображение
Code
<img src="Здесь путь к файлу изображения" alt="" />
и имеем блок с ID с названием htmlcaption
Code
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
Значит, чтобы у нашего изображения вывелась подпись из блока, нужно добавить ему атрибут title с названием ID этого блока
Code
<img src="Здесь путь к файлу изображения" alt="" title="#htmlcaption" />
При этом для блока, содержащего подпись, обязательно должен быть применен класс "nivo-html-caption", а сам блок должен располагаться вне блока слайдера.
Дополнительно само изображение можно сделать ссылкой, выше мы говорили, что слайдер поддерживает ссылки для изображений:
Code
<a href="Здесь какая-то ссылка"><img src="Здесь путь к файлу изображения" alt="" title="#htmlcaption" /></a>
Имеющиеся эффекты перехода изображений
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
Настройки параметров скрипта и опции
Как я говорил выше, для всех трёх тем оформления в конце кода страницы нужно подключать скрипт, в общем виде он выглядит, как мы его и указали:
Code
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Это "базовая" версия, расширенная же его версия с многочисленными параметрами и настройками выглядит следующим образом:
Code
<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
randomStart: false, // Start on a random slide
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>
Перевод: PS-Studio.Info
Всего комментариев: 0
Оставь комментарий первым!
Оставь комментарий первым!
