Створюємо управління слайдером зображень від Ормана з допомогою Nivo. Nivo slider

19

Від автора: У цьому уроці автор покаже як об’єднати дизайн Ормана з чудовим плагіном Nivo Slider! Що стосується кросбраузерності, то автор протестував отриманий результат в IE7 і старше. Проблем не спостерігалося взагалі, крім як з роздільниками заголовка (створеними з допомогою тіні блоку).

Створюємо управління слайдером зображень від Ормана з допомогою Nivo. Nivo sliderСтворюємо управління слайдером зображень від Ормана з допомогою Nivo. Nivo slider

Крок 1: Створюємо структуру папок

Щоб все виходило акуратно, спочатку давайте створимо структуру папок. Створіть три папки під назвами, відповідно, «css», «images» і «js». У папці css буде міститися таблиця стилів. Images – для зображень, а в js будуть міститися jQuery плагіни – в даному випадку слайдер Nivo!

Створюємо управління слайдером зображень від Ормана з допомогою Nivo. Nivo slider

Крок 2: Розмітка HTML5

Отже, у нас вже є структура папок, тепер потрібний документ html. Створіть його в корені свого проекту. Ми застосуємо простий шаблон HTML5, який посилається при цьому на бібліотеку jQuery, розташовану на Google.

Image Slider Controls

Крок 3: Створюємо спільні стилі

Почнемо з декількох стилів скидання:

h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a abbr, acronym, address, big, cite code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, венеції,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, назва, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: «;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
text-decoration:none;
}

Тепер перед тим, як взятися за сам слайдер, додамо на сторінку фон. Якщо ви вже завантажили PSD, то побачите, що в ньому є шар з радіальним градієнтом, що передбачає легке виділення-підсвічування. Ми створимо його, отримавши потрібний шаблон, трохи світліший, ніж PSD. Застосувавши фон, використовуємо кілька вкладених тіней блоку над тегом html, щоб постаратися продублювати світло в центрі.

html {
-webkit-box-shadow:
inset 250px 250px 250px rgba(0,0,0,.25),
inset -250px -250px 250px rgba(0,0,0,.25);
-moz-box-shadow:
inset 250px 250px 250px rgba(0,0,0,.25),
inset -250px -250px 250px rgba(0,0,0,.25);
box-shadow:
inset 250px 250px 250px rgba(0,0,0,.25),
inset -250px -250px 250px rgba(0,0,0,.25);
width:100%;
height:100%;
}
body {
background:url(../images/bg.jpg) repeat;
font-size:100%;
}

Створюємо управління слайдером зображень від Ормана з допомогою Nivo. Nivo slider

Крок 4: Структура слайдера

Тепер можна зайнятися слайдером! Nivo Slider – робота Гілберта Пеллегрома (Gilbert Pellegrom) і Майкла Райта (Michael Wright), разом відомих як Dev7studios, є колегами Ормана (Orman).

Він дозволяє нам створити слайдер з мінімально можливою кількістю розмітки. Все що потрібно – це створити div будь ID на ваш смак; я застосовую в даному випадку «slider» і клас «nivoSlider». Тоді вам потрібно всього лише розмістити свої зображення всередину div » а, от і все!

Image Slider Controls

Створюємо управління слайдером зображень від Ормана з допомогою Nivo. Nivo slider
Створюємо управління слайдером зображень від Ормана з допомогою Nivo. Nivo slider

Крок 5: Вирівнюємо слайдер по центру

Далі ми отцентрируем свій слайдер в середині сторінки; якщо ви читали мій останній підручник, то в деталях знають, як цього домогтися. Якщо потрібно більше інформації, прочитайте про прийоми CSS цю статтю.
Ще в продовження ми додали до слайдеру кілька тіней блоку, пам’ятаючи при цьому про префіксах браузерів. Зверніть увагу, що додано також трохи CSS, потрібного для роботи nivoSlider.

#slider {
position:absolute !important;
top:50%;
left:50%;
width:650px;
height:350px;
margin-top:-175px;
margin-left:-325px;
-webkit-box-shadow:
0px 0px 5px rgba(0,0,0,.5),
0px 0px 20px rgba(0,0,0,.2);
-moz-box-shadow:
0px 0px 5px rgba(0,0,0,.5),
0px 0px 20px rgba(0,0,0,.2);
box-shadow:
0px 0px 5px rgba(0,0,0,.5),
0px 0px 20px rgba(0,0,0,.2);
}
.nivoSlider img {
position:absolute;
top:0;
left:0;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}

Крок 6: Завантажуємо Nivo

Пора інтегрувати Nivo Slider. Почніть з переходу на https://themeisle.com/plugins/nivo-slider/ і скачування плагін jQuery. Скачавши і розпакувавши, скопіюйте файл jquery.nivo.slider.js у свою папку js, створену на Кроці 1.

Далі нам потрібно зробити посилання на цей файл всередині свого документа html.

Image Slider Controls

Створюємо управління слайдером зображень від Ормана з допомогою Nivo. Nivo slider
Створюємо управління слайдером зображень від Ормана з допомогою Nivo. Nivo slider

Крок 7: Підключаємо плагін

Тепер, коли плагін завантажено і на нього зроблено посилання, нам знадобиться підключити його до слайдеру, а також визначити кілька додаткових параметрів. За подробицями всіх доступних опцій зверніться до документації Nivo.

$(window).load(function() {
$(‘.nivoSlider’).nivoSlider({
effect: ‘sliceDown’,
directionNavHide: false,
captionOpacity: 1,
controlNav: false
});
});

Крок 8: Де ж титри?

Ми закінчили свій слайдер! Але почекайте, що там з тестом? Слайдер Nivo створює написи з тега заголовка title наших зображень, потім застосовує ID/класи, щоб можна було призначати їм стилі на свій смак! Ми створимо фон титрів з допомогою градієнтів CSS3. Зверніть увагу, що в якості фону покажчиків навігації також застосовується фон заголовка, так як це досить логічний спосіб їх створення.

Створюємо управління слайдером зображень від Ормана з допомогою Nivo. Nivo slider
Створюємо управління слайдером зображень від Ормана з допомогою Nivo. Nivo slider
.nivo-caption {
position:absolute;
left:75px;
bottom:29px;
width:498px;
padding-top:13px;
padding-bottom:13px;
z-index:8;
border:1px solid #000;
border-left-color:rgba(0,0,0,.5);
border-right-color:rgba(0,0,0,.5);
-webkit-box-shadow:
inset 1px 0px 0px rgba(255,255,255,.15),
0px 1px 3px rgba(0,0,0,.7);
-moz-box-shadow:
inset 1px 0px 0px rgba(255,255,255,.15),
0px 1px 3px rgba(0,0,0,.7);
box-shadow:
inset 1px 0px 0px rgba(255,255,255,.15),
0px 1px 3px rgba(0,0,0,.7);
background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
filter: програми:DXImageTransform.Microsoft.gradient( startColorstr=’#e648494c’, endColorstr=’#e6262728′,GradientType=0 );
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.nivo-caption p {
margin:0;
font-family:’Helvetica Neue’, Helvetica, Arial, sans-serif;
font-size:14px;
font-weight:bold;
color:#fff;
text-align:center;
text-shadow:0px -1px 0px #000;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}

Створюємо управління слайдером зображень від Ормана з допомогою Nivo. Nivo slider

Крок 9: Закінчуємо

Ми майже закінчили, нам потрібно тільки додати кнопки «Next» («Наступний») і «Previous» («Попередній»). До цього моменту ми якомога більше намагалися покладатися на css, але тепер створимо ці стрілки-вказівники з допомогою зображення з прозорим фоном.

.nivo-directionNav a {
position:absolute;
bottom:30px;
z-index:9;
cursor:pointer;
text-indent:-9999px;
ширина:45px;
height:39px;
background-image:url(../images/arrows.png);
background-repeat:no-repeat;
}
.nivo-prevNav {
left:75px;
background-position:0 0;
box-shadow:
1px 0px 0px rgba(255,255,255,.2),
2px 0px 0px rgba(0,0,0,.4);
}
.nivo-nextNav {
right:77px;
background-position:-45px 0px;
box-shadow:
-1px 0px 0px rgba(255,255,255,.2),
-2px 0px 0px rgba(0,0,0,.4);
}

Висновок

Отже, ми зробили це! Взяли інший дизайн Ормана і кодували його – на цей раз за допомогою чудового плагіна Nivo Slider!

Що стосується кросбраузерності, то я протестував його в IE7 і старше. Проблем не буде взагалі, крім як з роздільниками заголовка (створеними з допомогою тіні блоку). Якщо ви зацікавлені в більш широкій підтримці браузерів, прочитайте цей пост про лікування проблем CSS3 в старих браузерах.