Від Автора: Коли в особливій ціні простір, використання слайдерів — оптимальний спосіб передачі інформації. Сьогодні ми подивимося, як створити простий слайдер для сайту, аналогічний (pdw) в iTunes store.
Розробники часто прагнуть до функціональності, забезпечуваною слайдерами, для того, щоб вмістити максимум інформації у передбачених простір. І створення такого слайдера не так важко, як ви могли подумати. Трохи спланувавши і поекспериментувавши, ви зможете досить швидко створити собі простий слайдер.
Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.
Зацікавлені? Давайте почнемо прямо зараз!
Цілі проекту
До початку кодування визначимо завдання для цього віджета.
Зводити до мінімуму простір, займане зображеннями, роблячи величину слайд-шоу такий же, як розмір окремого зображення, а потім поступово змінюючись між ними.
Реалізувати збоку вертикальну карусель зображень, показує майбутні зображення.
Забезпечувати спосіб пересування каруселі і слайд-шоу вперед вручну. У цьому випадку ми скористаємося єдиним простим елементом прив’язки.
В каруселі верхнє зображення наступне на черзі, воно буде демонструватися при натисканні на клавішу next.
Мінімізувати використання DOM в тій мірі, в якій це можливо. Не можна сказати, щоб ми зовсім не збиралися чіпати DOM, просто не станемо займатися DOM’ом занадто багато.
План дій
Власне, існує невелика кількість способів зробити такий віджет. Для реалізації нашого сьогоднішнього задуму я збираюся дотримуватися техніки, яка залишається вірною приказці:
Якщо сумніваєшся, використовуй грубу силу.
Крок 1: Встановіть CSS для контейнера галереї зображень так, щоб всі основні зображення звернулися до розміру одного зображення. Трохи нижче я поясню цей момент.
Крок 2: Виберіть CSS для контейнера зменшених зображень (каруселі) так, щоб були видні лише три зображення.
Крок 3: Пройдіться по циклу images і встановіть клас з числовим індексом для кожного зменшеного і основного зображення, щоб незалежно ідентифікувати кожне. Наприклад, кожне зображення отримує клас thumb-xx, де xx – номер.
Крок 4: При натисканні клавіші next посуньте карусель на одне зменшене зображення вгору, а потім покажіть зображення, відповідне зменшеному.
Це – основні кроки, потрібні для створення такого ефекту. Я поясню детально кожен крок по мірі просування вперед.
Крок 1: Основна розмітка
Розмітка HTML для демо-сторінки виглядає так:
iTunes slider
A simple slider/slideshow which mostly emulates the one on iTunes barring a few changes. Click the button down to the cycle images.
Ігноруючи несуттєвий код, у нас є два контейнера елементів з зображеннями: один для зображень основний галереї, другий – для зменшених. Кожному з них я присвоїв ID, так що до них можна легко отримати доступ з JavaScript. Ми також включаємо елемент прив’язки, який діє як клавіша next.
В кінці ми включаємо бібліотеку jQuery і наш власний файл сценарію.
До кінця цієї стадії наша демо-сторінка виглядає просто набором зображень.
Крок 2: Оформлення CSS
*{
margin: 0;
padding: 0;
border: none 0;
outline: 0;
}
body{
font-family: “Lucida Grande”, “Verdana”, sans-serif;
font-size: 12px;
}
p{
margin: 0 20px 40px 0;
}
h1{
font-size: 30px;
font-family: “Myriad Pro”, “Lucida Grande”, “Verdana”, sans-serif;
padding: 0;
margin: 0;
}
h2{
font-size: 20px;
}
#container{
width: 900px;
margin-left: auto;
margin-right: auto;
padding: 50px 0 0 0;
position: relative;
}
img{
display: block;
}
#gallery #thumbs{
float: left;
}
#gallery{
width: 800px;
height: 300px;
overflow: hidden;
}
#gallery img{
position: absolute;
}
#thumbs{
width: 100px;
height: 300px;
overflow: hidden;
}
#next{
display: block;
width: 47px;
height: 43px;
background: url(img/arrow.png);
position: relative;
top: 257px;
left: 855px;
}
#next:hover{
background: url(img/arrowmo.png);
}
.clear{
clear: both;
}
CSS виглядає очевидним, але я хочу, щоб ви звернули увагу на кілька моментів:
По-перше, зауважте, що я застосував position: absolute to #gallery img. Це гарантує нам, що зображення накладаються зверху один на одного, а не слідують одне за іншим. Таким чином, пізніше ми зможемо керувати їх непрозорістю для того, щоб вирішити, яке зображення показувати.
По-друге, зверніть увагу, що висота елемента thumbs встановлена на 300px. Це тому, що в демо кожне зменшене зображення має висоту 100px і я хочу, щоб карусель показувала відразу по три зображення. Власне, для своєї особистої реалізації можете збільшити висоту цього елемента в залежності від кількості зменшених зображень, які хочете показувати одночасно.
Також зверніть увагу той факт, що ми встановили властивість overflow на hidden для того, щоб упевнитися, що одночасно показується не більше трьох зменшених зображень.
Після того, як ми визначили стиль нашому слайдеру, він виглядає так, як показано на зображенні внизу. Зверніть увагу, що майже всі вже знаходиться на своєму місці. Останнє зображення знаходиться зверху і, таким чином, мабуть.
Крок 3: Реалізація JavaScript
Тепер, коли у нас вже є базова структура, і присутні основні стилі, ми можемо почати кодувати необхідну функціональність. Зауважте, що далі ми будемо широко використовувати jQuery. Не соромтеся використовувати посилання на CDN Google (Google Content Distribution Network – мережа дистрибуції ПО), якщо необхідно.
Знаходження елементів та їх підготовка
Спочатку нам потрібно отримати зображення і відповідні їм зменшені копії для того, щоб можна було їх обробити.
var images = $(“#gallery img”);
var thumbs = $(“#thumbs img”);
var index = 0;
Вищевказаний уривок коду подбає про отримання списку зображень і їх зберіганні для пізнішого використання. Ми також створюємо змінну, названу index, щоб визначити початковий номер елемента. В даний час я збираюся почати з першого елемента. Зверніть увагу, що index використовує нумерацію, що починається з нуля.
for (i=0; i
Навішуємо обробник
Тепер нам потрібно створити обробник подій і прикріпити його до клавіші next так, щоб ми могли щось зробити, коли натискають на клавішу.
$(“#next”).click(sift);
Це робиться одним рядком. По суті, ми призначаємо викликати функцію sift кожен раз, коли натискається клавіша next.
function sift()
{
if (index<(thumbs.length-1)) {index+=1 ; }
else {index=0}
show (index);
}
Насправді, це дуже простий обробник подій. Ми просто перевіряємо, який елемент вибрано. Якщо це останній елемент, ми знову встановлюємо вказівник так, щоб карусель поверталася до першого елемента, створюючи, таким чином, псевдобесконечную послідовність. Інакше, ми збільшуємо index на 1.
Далі, ми викликаємо функцію show, вказуючи змінну index, як параметр. Ще трохи, і ми створимо всі що потрібно.
Крок 4: Реалізація основної логіки
function show(num)
{
images.fadeOut(400);
$(“.image-“+num).stop().fadeIn(400);
var scrollPos = (num+1)*imgHeight;
$(“#thumbs”).stop().animate({scrollTop: scrollPos}, 400);
}
Функція show реалізує в цьому віджеті основну функціональність. Дозвольте мені пояснити кожен компонент.
По-перше, ми поступово зменшуємо прозорість кожного зображення, що міститься в елементі gallery. Далі ми поступово збільшуємо прозорість (проявляємо) тільки потрібне зображення, використовуючи його клас. Так як до кожного зображення є доступ за допомогою його класу і ми маємо позиційної покажчик зображення, то просто використовуємо наступний селектор (jQuery): “.image-“+num
Потім нам потрібно скроллировать вміст елемента thumbnail таким чином, щоб потрібне зображення було нагорі каруселі. Це можна зробити двома способами.
Перший спосіб використовує властивість jQuery position. Воно дозволяє визначити позицію елемента щодо його батьківського елементу. До нещастя, тут я натрапив на деякі проблеми з його роботою в браузері Chrome, що означає, що нам доведеться використовувати другий спосіб.
Наступний спосіб насправді такий же простий. Оскільки ми можемо легко визначити висоту зменшеного зображення, і кожне таке зображення має однакову висоту, ми можемо просто знайти твір n-ної позиції елемента в списку на висоту зменшеного зображення, щоб отримати його зміщення зверху.
var imgHeight = thumbs.attr(“висота”);
Вищевказана рядок дозволяє нам отримати висоту зменшеного зображення. Зауважте, що колекція елементів може запитуватися, як ніби це звичайний елемент.
var scrollPos = (num+1)*imgHeight
Тепер ми розраховуємо зміщення потрібного нам зменшеного зображення. Так як нам необхідно зменшене зображення наступного елемента в списку, а не саме зображення, ми збільшуємо його індекс на 1 перед множенням на висоту.
Тепер за допомогою цієї інформації ми можемо скроллировать елемент на необхідну нам висоту.
$(“#thumbs”).stop().animate({scrollTop: scrollPos}, 400);
Ми користуємося анімаційними можливостями jQuery, щоб змінити властивість scrollTop до того значення, яке ми визначили вище. По суті, ми прокручуємо елемент на x пікселів зверху, щоб створити ефект каруселі.
Крок 5: Деяка підстроювання
Наведемо глянець ефект псевдобесконечности
Ми практично закінчили, але ще трохи коду все-таки отполируем.
thumbs.slice(0,3).clone().appendTo(“#thumbs”);
Ця рядок, по суті, бере три перших зменшених зображення і копіює їх в кінець списку. Метод slice вибирає три перших елемента, метод clone клонує ці елементи DOM і, нарешті, метод appendTo додає їх у вибраний елемент.
Ми не можемо просто так використовувати для appendTo відрізок із вибраних трьох елементів, поки вони знаходяться на своїх місцях, що помістити їх, куди потрібно. Спочатку нам потрібно скопіювати методом clone.
Ми це робимо для того, щоб візуально ілюзія нескінченної каруселі зберігалася, коли ми досягаємо останніх зменшених зображень. В іншому випадку, користувач буде бачити порожні блоки, а це зовсім не те, що потрібно.
Змусимо карусель обертатися автоматично
Змусити цей віджет автоматично обертатися на насправді дуже просто. Правильний обробник подій вже знаходиться на своєму місці, нам просто треба його викликати кожні n – мікросекунд. Про це подбає наступний рядок:
setInterval(sift, 8000);
Вище в коді я попросив викликати функцію sift кожні 8 секунд. Зверніть увагу, тривалість передається в мікросекундах, отже, n тисяч одно n секунд.
Ініціалізація віджету
В даний час сторінка завантажується з неинициализированным віджетом. Нам доведеться це виправити. Все, що потрібно зробити – викликати функцію show, з параметром встановленим в початкову позицію.
Після прикріплення обробника подій, додайте це:
show(index);
Завершальний код
Ось ми і закінчили! Остаточно код виглядає ось так:
$(document).ready(function() І ось що ми маємо: ми створили простий, але корисний слайдер. Сподіваюся, що ви знайшли цей підручник цікавим і корисним. Не соромтеся використовувати цей код де завгодно у своїх проектах і дзвоніть в усі дзвони в коментах, якщо зіткнулися з труднощами. Питання? Похвали? Критика? Рухайтеся в секцію коментарів і оставлйте повідомлення. Щасливого кодування! На цьому урок по створенню простого слайдера для сайту закінчено. Перегляд Demo Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself. E-mail: [email protected] Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.
{
var index = 0;
var images = $(“#gallery img”);
var thumbs = $(“#thumbs img”);
var imgHeight = thumbs.attr(“висота”);
thumbs.slice(0,3).clone().appendTo(“#thumbs”);
for (i=0; i
