Створення красивого і доступного слайдшоу з допомогою jQuery

14

Від автора: з цього вичерпного підручника з веб-розробки ви дізнаєтеся, як створити зручний і доступний віджет слайдшоу для свого сайту за допомогою HTML, CSS і JavaScript (jQuery). У процесі створення ви побачите в дії концепцію Progressive Enhancement (прогресивне поліпшення).

Кінцевий результат

Для живої демонстрації віджета слайдшоу клацніть на зображенні внизу.

Створення красивого і доступного слайдшоу з допомогою jQuery

Викачуємо вихідні файли

Ви можете завантажити вихідні файли цього підручника для вивчення. Поряд з використаним у ньому цілим скриптом jQuery комплект вихідних файлів містить файл PSD для веб-розмітки демонстраційної сторінки під назвою mockup-slideshow.psd, а також фонові зображення CSS і допоміжні файли, використовувані для створення слайдшоу.

Створення красивого і доступного слайдшоу з допомогою jQueryСтворення красивого і доступного слайдшоу з допомогою jQuery

Встановлюємо основи

Найважливіша частина гарного компонента мережі – це міцна структура HTML. Семантична основа означає, що ваш контент буде практично досяжний для будь-яких клієнтських браузерів.

Наша структура вмісту містить div під назвою #slideshow, який служить слайдшоу контейнером. Всередині нього розташовується інший div під назвою #slideContainer, який містить слайди, є div ами з класом, встановленим на .slide.

Блок 1: Розмітка HTML

Нижче в прикладі 1 ви побачите, як браузери з текстовим інтерфейсом і браузери, нездатні візуалізувати CSS і JavaScript, побачать наше слайдшоу. Важливо зауважити, що весь контент легкодоступний; ми нічого не приховали від користувача, гарантуючи, що кожен зможе побачити вміст нашого сайту.

Для лівого і правого елементів управління (стрілок) тут немає розмітки, ми вставимо її в DOM пізніше за допомогою JavaScript. Внесення їх на рівні структури вмісту збивало б з пантелику тих, у кого немає можливості підтримувати CSS та JavaScript.

Приклад 1: HTML-структура контенту слайдшоу

Підказка: Спочатку тестуйте мережеву доступність сайту, і робіть це часто. При роботі над чимось новим завжди слід тестувати свою HTML-структуру на доступність. Тестуючи доступність сайту для скринридера, можна скористатися безкоштовним веб-додатком під назвою WebAnywhere для імітації того, як людина, що використовує скринридер, буде взаємодіяти з вмістом вашого сайту.

Призначаємо слайдшоу стилі

Наступним кроком до правильного дизайну є хороший набір стилів, що враховують можливість того, що у вас відключен JavaScript.

В #slidesContainer ми встановлюємо властивість overflow (переповнення) на auto, так що коли наш контент вийде за межі встановленої висоти в 263px (висота наших слайдів), з’являться смуги прокручування.

Блок 2: #slidesContainer CSS

#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}

Для влаштування смуги прокручування праворуч, яка з’явиться, коли вимкнений JavaScript, нам потрібно зменшити ширину .slide класу div на 20px.

Блок 3: Клас CSS .slide

#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels to avoid horizontal scroll */
height:263px;
}

Без JavaScript’а наш контент все одно доступний користувачі можуть прокручувати вгору і вниз і дивитися наші слайди.

Приклад 2: Слайдшоу без JavaScript’а

Як альтернативне рішення ви можете призначити правилом стилю .slide властивість float:left; так що замість прокручування по вертикалі користувачі зможуть переглядати слайди по горизонталі.

CSS для лівого і правого елементів управління

Для деякої економії ресурсів візуалізації JavaScript ми заявимо правила стилів для лівого і правого елементів управління, які вставимо в DOM через jQuery.

Вони будуть елементами , так що ми заявляємо властивість курсору і призначаємо йому значення pointer для зміни вказівника миші у випадку, коли користувач проводить над елементами управління. Для того, щоб приховати увазі текст, ми застосовуємо властивість text-indent, це спосіб заміни фонового зображення в CSS.

Блок 4: Управління

/**
* Правила стилів елементів управління слайдшоу.
*/
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(img/control_right.jpg) no-repeat 0 0;
}

Кращий розділ… JavaScript

Коли HTML і CSS вже на своїх місцях, пора розважитися. Щоб зробити своє слайдшоу більш інтерактивним і анімованим, ми використовуємо бібліотеку jQuery.

Теорія

Перше, що нам потрібно зробити – «скасувати» заявлені в CSS-стилі, що мають відношення до сценарію, коли вимкнений JavaScript. Це включає оголошення стилів CSS JavaScript для #slidesContainer, щоб прибрати його смугу прокручування. До того ж потрібно змінити розмір div ів .slide до 560px, який ми зменшили на 20px для підгонки смуги прокручування. Нам також потрібно зрушити div и вліво так, щоб вони показувалися поруч по горизонталі замість того, щоб громадитись поверх один одного по вертикалі.

Потім, попрацювавши з DOM, ми вставляємо div під назвою #slideInner, який обгортає всі наші слайди і має ширину, рівну загальній ширині всіх div ів .slide.

Нарешті, ми вставляємо лівий і правий елементи управління (з іменами класу .control) для користувача навігації; робимо це в JavaScript, так що клієнтські браузери з вимкненим JavaScript’му їх не побачать.
Ось для вашої уваги код JavaScript цілком, а пізніше ми розглянемо його в деталях.

Блок 5: Скрипт jQuery цілком

$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $(‘.slide’);
var numberOfSlides = slides.length;
// Видалити смугу прокручування JS
$(‘#slidesContainer’).css(‘overflow’, ‘hidden’);
// Обернути все .slides у div #slideInner
slides
.wrapAll(‘

‘)
// Float left to display horizontally, readjust .slides width
.css({
‘float’ : ‘left’,
‘width’ : slideWidth
});
// Встановити ширину #slideInner рівною загальній ширині всіх слайдів
$(‘#slideInner’).css(‘width’, slideWidth * numberOfSlides);
// Вставити лівий і правий елементи управління в DOM
$(‘#slideshow’)
.prepend(‘Move left‘)
.append(‘Move right‘);
// Приховати лівий елемент управління при першому завантаженні
manageControls(currentPosition);
// Створити слухачі події клацання .controls
$(‘.control’)
.bind(‘click’, function(){
// Визначити нове положення
currentPosition = ($(this).attr(‘id’)==’rightControl’)
? currentPosition+1 : currentPosition-1;
// Сховати/показати елементи управління
manageControls(currentPosition);
// Move slideInner using margin-left
$(‘#slideInner’).animate({
‘marginLeft’ : slideWidth*(-currentPosition)
});
});
// manageControls: Приховує і показує елементи управління в залежності від currentPosition
function manageControls(position){
// Приховати лівий елемент управління, якщо position – перший слайд
if(position==0){ $(‘#leftControl’).hide() }
else{ $(‘#leftControl’).show() }
// Приховати правий елемент управління, якщо position – останній слайд
if(position==numberOfSlides-1){ $(‘#rightControl’).hide() }
else{ $(‘#rightControl’).show() }
}
});

Створення декількох об’єктів

Спочатку вгорі скрипта ми ініціюємо кілька змінних, які будемо використовувати протягом сценарію.

currentPosition – це число, яке містить поточне положення слайдшоу .slideWidth – це ширина кожного div а .slide, фіксована на 560px. Я вирішив оголосити об’єкт для селектора $(‘.slide’), щоб наш код виглядав трохи акуратніше, але ви можете це пропустити і використовувати у своєму синтаксисі цілий селектор ($(‘.slide’)).

Нарешті ми визначаємо кількість слайдів свого шоу, використовуючи прийом .length.

Блок 6: Змінні і константи

var currentPosition = 0;
var slideWidth = 560;
var slides = $(‘.slide’);
var numberOfSlides = slides.length;

Видалення смуги прокрутки

Якщо сценарій працює, то у нашого користувача включений JavaScript, так що ми видалимо смугу прокрутки, встановивши властивість переповнення overflow slidesContainer’а на ‘hidden’ — так воно замістить в нашому CSS оголошення overflow:auto (дивись Блок 3).

Блок 7: Зміна значення властивості CSS overflow на прихований (hidden)

$(‘#slidesContainer’).css(‘overflow’, ‘hidden’);

Вставляємо div у DOM

Для переміщення своїх слайдів вліво і вправо ми застосуємо властивість полів (докладніше про нього пізніше). Щоб це зробити, потрібно створити div, який обгортає все div и .slide, встановити йому ту ж ширину, що і загальна ширина всіх наших слайдів. Відрегулювавши властивості полів цього div а (пізніше), ми створимо ефект його рухи вліво й вправо.

Блок 8: Вставляємо #slideInner в DOM способом .wrapAll()

slides
.wrapAll(‘

‘)

Нам також потрібно встановити ширину #slideInner, новоствореного div а, на загальну ширину всіх div ів .slide.

Блок 9: Вставляємо #slideInner в DOM способом .wrapAll()

$(‘#slideInner’).css(‘width’, slideWidth * numberOfSlides);

Визначення стилів слайдів у JavaScript’е

При включеному JavaScript нам потрібно, щоб слайди зміщувалися вліво і, таким чином, демонструвалися пліч-о-пліч. Також потрібно встановити їх на ширину на 560px, оскільки у нас більше не буде смуги прокручування.

Ми можемо послідовно зв’язати метод .css і метод .wrapAll(), використаним нами в Блоці 8.

Блок 10: Призначення div ам .slide властивості CSS overflow:hidden

slides
.css(‘overflow’, ‘hidden’)
.wrapAll(‘

‘)

Вставка в DOM елементів управління

Ми вставляємо стрілки (елементи управління), маніпулюючи DOM; таким чином, користувачі, що використовують браузери з відключеним JavaScript’ом і скринридеры, не отримають в результаті увечную структуру HTML нікуди не провідними елементами керування, тому що без JavaScript’ клацати на них буде марно.

Ми робимо це за допомогою способів .prepend ().append(), які вставляють рядок HTML всередину вибраного об’єкту(ів) (у даному випадку обрано div #slideshow). Текст усередині елементів span не має значення, тому що вони приховані.

Блок 11: Вставляємо елементи управління в DOM

$(‘#slideshow’)
.prepend(‘Moves left‘)
.append(‘right Moves‘);

Управління лівим і правим елементом-стрілкою за допомогою функції

Для управління елементами-стрілками ми створюємо функцію з назвою manageControls, яка приховує і показує елементи управління, виходячи з поточного стану слайдшоу.

На першому слайді ми приховуємо лівий елемент-стрілку, тому що попередній слайд відсутня. На останньому слайді ми приховуємо правий, тому що користувач дійшов до кінця слайдшоу. Робиться це за допомогою способів jQuery .hide ().show(), які приховують/показують попередні обраному елементи DOM.

Блок 12: Функція manageControls()

function manageControls(position){
// position==0 – це перший слайд
if(position==0) { $(‘#leftControl’).hide(); }
else { $(‘#leftControl’).show(); }
// numberOfSlides-1 – це останній слайд
if(position==numberOfSlides-1) { $(‘#rightControl’).hide(); }
else { $(‘#rightControl’).show(); }
}

Викликаємо manageControls() в DOM

При завантаженні першого скрипта нам потрібно викликати функцію manageControls() один раз для того, щоб приховати лівий елемент управління. Зробити це легко, ми лише передаємо їй аргумент currentPosition, який повинен у вихідному положенні бути на 0.

Блок 13: Викликаємо manageControls() при завантаженні скрипта (подія domready)

manageControls(currentPosition);

Прив’язка події клацання до елементів управління

Останнім кроком до сценарію слайдшоу jQuery є прив’язка подій до правого і лівого елементів управління. Так, по суті, створюються «слухачі події», що запускають функції, коли користувач клацає на лівий або правий елемент управління.

Блок 14: Прив’язуємо слухач події клацання до класу .control

$(‘.control’).bind(‘click’, function(){
// Робити що-то при клацанні користувача
});

Оновлення значення currentPosition

Коли користувач клацає елемент управління, ми оновлюємо значення змінної currentPosition: якщо натиснути на праву стрілку (з ID #rightControl), то ми додаємо 1 до currentPosition; якщо на ліву стрілку (з ID #lefControl), то віднімаємо 1 з currentPosition. Те, що ви бачите внизу, називається ternary operator (тримісний оператор), це скорочений запис для структур управління if/else.

Блок 15: Тримісний оператор установки нового значення currentPosition

currentPosition = ($(this).attr(‘id’)==’rightControl’)
? currentPosition+1 : currentPosition-1;

Виклик manageControls() після оновлення currentPosition

Після налаштування значення currentPosition ми знову викликаємо manageControls() для того, щоб приховати або показати свої елементи управління в залежності від нового положення слайда.

Блок 16: Виклик manageControls() всередині .bind

manageControls(currentPosition);

Анимируем слайди

Нарешті, ми пересуваємо #slideInner вліво або вправо шляхом анімації значення його CSS властивості margin-left. Ліве поле – це негативна ширина слайдів, помножена на поточне положення. Наприклад, якщо ми переходимо до слайда 3, то ліве поле одно — 1120px.

Блок 17: Застосування способу .animate для переходу властивості CSS margin-leftM

$(‘#slideInner’).animate({
‘marginLeft’ : slideWidth*(-currentPosition)
});

Резюме

У цьому підручнику ми створили простий сценарій слайдшоу з допомогою міцного HTML, CSS і JavaScript’а (jQuery). Для забезпечення роботи віджета слайдшоу без CSS і JavaScript ми застосували концепцію Progressive Enhancement (прогресивне поліпшення), що зробить наш скрипт доступним більшості сценаріїв браузерів.