Сегодня я предлагаю познакомиться с замечательным jQuery-слайдером Nivo Slider и научиться подключать его к сайту.
Этот плагин говорит сам за себя… Очень качественный, очень эффектный. Из JQuery слайдеров этот плагин самый простой в использовании.
К сожалению темы которые поставляются с плагином заточены под определенный размер изображений, хотя тема default подходит для использования любых изображений. Думаю для программиста или верстальщика создание собственной темы не станет проблемой.
Для слайдера доступны 3 темы оформления:
Default
Orman
Pascal
чтобы подключить слайдер на страницах своего сайта, нужно для любой из 3-х тем:
1. Подключить между тегами
<head> ... </head>
следующие файлы стилей
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
для темы default дополнительно к первым двум файлам подключить файл стилей темы:
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
для темы orman дополнительно к первым двум файлам подключить файл стилей темы:
<link rel="stylesheet" href="../themes/orman/orman.css" type="text/css" media="screen" />
для темы pascal дополнительно к первым двум файлам подключить файл стилей темы:
<link rel="stylesheet" href="../themes/pascal/pascal.css" type="text/css" media="screen" />
2. В самом низу кода страницы, перед закрывающим тегом
</body>
для любой из выбранных тем оформления слайдера подключить скрипты:
<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. В том месте, где вы планируете разместить слайдер изображений, вставляем код слайдера:
<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>
А для того, чтобы выбрать код слайдера определенной цветовой темы, нужно из этих трех строк выбрать одну нужную, соответствующую названию темы:
<div> /* оставить эту строку для темы оформления default, остальные две убрать */ <div> /* оставить эту строку для темы orman, остальные две убрать*/ <div> /* оставить эту строку для темы pascal, остальные две убрать*/
Например, если мы хотим выбрать оформление слайдера темой orman, то из этих 3-х строк останется одна:
<div>
Как видите, всё просто, главное проследите, чтобы пути к файлам стилей, скриптов и изображений были корректно прописаны. Всё необходимое для установки вы найдете в исходниках.
Немного об оформлении изображений в слайдере.
Чтобы добавить подпись к изображению, вам нужно всего лишь добавить для него атрибут title
<img src="Здесь путь к файлу изображения" alt="" title="Здесь подпись к изображению" />
Чтобы добавить подпись к изображению, содержащую HTML — элементы (например,ссылку), нужно для изображения в атрибуте title указать название ID элемента, содержащего подпись.
Например, имеем изображение
<img src="Здесь путь к файлу изображения" alt="" />
и имеем блок с ID с названием htmlcaption
<div id="htmlcaption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
Значит, чтобы у нашего изображения вывелась подпись из блока, нужно добавить ему атрибут title с названием ID этого блока
<img src="Здесь путь к файлу изображения" alt="" title="#htmlcaption" />
При этом для блока, содержащего подпись, обязательно должен быть применен класс «nivo-html-caption», а сам блок должен располагаться вне блока слайдера.
Дополнительно само изображение можно сделать ссылкой, выше мы говорили, что слайдер поддерживает ссылки для изображений:
<a href="Здесь какая-то ссылка"><img src="Здесь путь к файлу изображения" alt="" title="#htmlcaption" /></a>
Имеющиеся эффекты перехода изображений
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
Настройки параметров скрипта и опции
Как я говорил выше, для всех трёх тем оформления в конце кода страницы нужно подключать скрипт, в общем виде он выглядит, как мы его и указали:
<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
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