Увеличиваем функционал сайта с помощью Nivo Slider

Сегодня я предлагаю познакомиться с замечательным jQuery-слайдером  Nivo Slider и научиться подключать его к сайту.

Этот плагин говорит сам за себя… Очень качественный, очень эффектный. Из JQuery слайдеров этот плагин самый простой в использовании.

К сожалению темы которые поставляются с плагином заточены под определенный размер изображений, хотя тема default подходит для использования любых изображений. Думаю для программиста или верстальщика создание собственной темы не станет проблемой.

Для слайдера доступны 3 темы оформления:

Default

79562525

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Posted in Плагины.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.