Пераклад на беларускую мову Patricia Clausnitzer
Грозны слайдэр малюнкаў на JQuery
Асаблівасці
- 9 унікальных эфектаў пераходу
- Простая і валідная разметка
- Магчымасці для налады
- Убудаваны кантроль навігацыі і кіравання
- Спакаваныя версія важыць усяго 7KB
- Падтрымліваюцца малюнкі па спасылцы
- Навігацыя з дапамогай клавіятуры
- Бясплатнае выкарыстанне па ліцэнзіі MIT
Падтрымка браўзараў
Nivo Slider выпрабаваны пад наступнымі браўзарамі:
- Internet Explorer v7 +
- Firefox версіі 3 +
- Google Chrome v4
- Safari v4
- Опера 10.5
Дэманстрацыя і Вітрына
Звярніце ўвагу на дэманстрацыі, каб атрымаць уяўленне пра тое, што можна зрабіць з Nivo Slider ці зірніце рэкламныя матэрыялы пра сайты, якія выкарыстоўваюць Nivo Slider. Калі вы жадаеце, каб ваш сайт быў у вітрыне, то дайце мне ведаць, і я змяшчу яго.
Выкарыстанне
Для выкарыстання Nivo Slider вы павінны ўключыць JQuery, а таксама сцэнары Nivo Slider і Nivo Slider CSS на старонцы:
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>Далей неабходна дадаць HTML-код. Звярніце ўвагу, што для таго, каб дадаць подпіс, вам проста трэба пазначыць атрыбут загалоўка да малюнка. Малюнкі па спасылцы падтрымліваюцца таксама ад версіі 1.2:
<div id="slider">
<img src="http://nivo.dev7studios.com/images/slide1.jpg" alt="" />
<a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/images/slide2.jpg" alt="" /></a>
<img src="http://nivo.dev7studios.com/images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="http://nivo.dev7studios.com/images/slide4.jpg" alt="" />
</div> Напрыканцы неабходна падлучыць скрыпт, выкарыстоўваючы функцыі$(window).load():
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>Nivo Slider мае мноства опцый для fiddle-шырыні. Ніжэй прыведзены прыклад кода, з ужываннем усіх наяўных варыянтаў і іх значэнні па змаўчанні:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
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
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>Параметрам для effect можа быць любое з наступных дзеянняў:
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random
Дадатковае пашырэнне
Гэтыя правілы не абавязковыя, але рэкамендуюцца для таго, каб зрабіць Nivo Slider выглядаць так, як належыць, калі вы яго выкарыстоўваеце.
Выкарыстанне CSS для прадухілення мігцення малюнка перад загрузкай
#slider {
position:relative;
//See the "style-pack" below for image
background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
У сувязі з тым вы павінны выкарыстоўваць
$(window).load(). Гэтая функцыя затрымкі ўжываецца для вызначаных стыляў да элементаў. Вы можаце зрабіць гэта ўручную, ўжываючы вышэйпаказаныя CSS-стылі, каб спыніць мігценне малюнка на старонцы.Пераканайцеся, што вашы малюнкі такога ж памеру
Каб спыніць паўзунок, трэба, што ўсе малюнкі маюць аднолькавы памер.
Start і Stop для слайдара
Для ручнога запуску і прыпынку паўзунка, вы можаце выкарыстоўваць наступны код:
$('#slider').data('nivo:vars').stop = true; //Stop the Slider
$('#slider').data('nivo:vars').stop = false; //Start the Slider
Некалькі слайдараў на адной старонцы
Nivo Slider падтрымлівае некалькі паўзункоў на той жа старонцы. Аднак вы павінны выкарыстоўваць JQuery V1.4.0 ці вышэй для таго, каб гэта працавала.
Малюнак знікае ў IE і Opera
Калі вы выкарыстоўваеце спасылкі на ўсе вашы малюнці, яны могуць рабіць дзіўныя рэчы ў IE і Опера. Каб вырашыць гэта, трэба проста дадаць наступнае CSS-правіла:
#slider a{
display:block;
}
Генерацыя паказу выпадковых малюнкаў
Для выкарыстання выпадковых слайдаў можна выкарыстоўваць параметр
startSlide. Выканайце наступныя дзеянні:var total = $('#slider img').length;
var rand = Math.floor(Math.random()*total);
$('#slider').nivoSlider({
startSlide:rand
});
Выкарыстанне Эскізы з Nivo Slider
Зірніце гэты падручнік, каб убачыць, як выкарыстоўваць малюначкі з дапамогай паўзунка.
Стыль вашага слайдэра, як на гэтым сайце
Вы павінны падаць свае ўласныя стылі для Nivo Slider. Разам з тым, у вашу карысць я стварыў "стыль-пак" са стылямі, выкарыстоўваемымі для паўзунка на гэтай старонцы.
Пстрыкніце тут для загрузкі.
Іншыя платформы
- Калі вы жадалі б выкарыстоўваць Nivo Slider з Wordpress, вы можаце азнаёміцца з гэтым кіраўніцтвам дзе распавядаецца, як гэта можна зрабіць з убудовай Nivo Slider Wordpress.
- Запампаваць Nivo Slider ці Праглядаў Nivo Slider - Drupal модуль.
- Запампаваць Nivo Slider Joomla модуль (HU).
Падтрымка
Калі вы выявілі памылку ў Nivo Slider, калі ласка, напішыце пытанне на старонцы GitHub. Калі ласка, не саромейцеся fork away ад GitHub і зрабіце свае ўласныя ўдасканаленні.
Калі ў вас ёсць нейкія іншыя пытанні, вы можаце напісаць мне на gilbert@dev7studios.com і ціўкнуўшы на Twitter @gilbitron. Не абяцаю, што я магу дапамагчы ці адказаць, але я зраблю ўсё магчымае.
Калі вам падабаецца гэты матэрыял, у дадатак вы можаце дапамагчы мне, падзяліўшыся ці ахвяруючы мне трохі грошай. Чаму б не купіць мяне піва?
