Ефектна галерея на jquery з використанням спрайтів анімації vol. 2

21

Від автора: було діло, ми вирішили, що можемо своїми руками зробити гарний анімований слайдер на jquery. Вирішили, і власне щось у нас навіть вийшло. Тепер наше завдання зробити його гідним цього чудового ресурсу.

У цьому уроці я покажу, які рішення я застосував до програми модернізації та ліквідації багів в альфа-версії нашого слайдера.

Щоб приступити до цього уроку, Вам необхідно ретельно вивчити альфа версію слайдера з мого попереднього уроку.

2. Треба звести скрипт додатка в одну функцію, для простого виклику і установки слайдера.

3. Необхідно дозволити користувачеві легко змінювати кількість фрагментів, швидкість їх появи, затримку між появами і ефект їх появи.

4. Додати пару красивих ефектів появи слайда.

Метод

Отже, розберемося, по засобах яких змін ми будемо добиватися результату.

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

1. Почнемо з кросбраузерності

Причиною бага в IE виявилася досить невинна помилка. При кліці по посиланню, ми викликали слайд згідно з атрибутом href посилання. IE приписував до вмісту атрибута href шлях до поточної директорії, і, природно, скрипт не знаходив слайда з таким ідентифікатором. Рішення цієї проблеми як ніколи просто: ми будемо виловлювати слайд згідно з атрибутом rel посилання, а не href.

2. Зведення скрипта в одну функцію

Що реалізувати цю затію, доведеться витягти скрипт з $(document).ready(function(){});, так як в ньому ми будемо функцію слайдера викликати.

Також, не менш важливим є питання об’єктного орієнтування. Ми зробимо так, щоб на одній сторінці можна було запустити два різних слайдера. Для цього ми будемо передавати функції клас діва, в якому лежать картинки. Потім всі елементи слайдера будуть викликатися як дочірні елементи діва з цим класом.

3. визначення параметрів слайдера

3.1 Щоб користувач міг змінювати кількість фрагментів, потрібно звести створення цих фрагментів цикл «for».

3.2 Швидкість і затримка появи фрагментів природно буде визначаться змінними, переданими в функцію.

3.3 Для визначення ефекту, ми використовуємо оператор if/else , який буде перевіряти, який ефект обраний користувачем і у відповідності з результатом перевірки будемо застосовувати потрібний ефект.

4. Додавання нових ефектів

Свіжий ефект, який ми будемо використовувати – це падіння фрагмента зверху, вылезание фрагмента знизу і чергування цих двох варіантів.

Для реалізації цього ефекту, нам в першу чергу потрібно буде насильно вбити паддінґ у головного діва і присвоїти йому релятивна позиціонування position:relative;. Потім, в разі вибору ефекту це, нам потрібно буде при кліці задати фрагменту негативний або позитивний маргин топ на кількість пікселів, рівну висоті фрагмента. І анімувати плавне повернення фрагмента до 0-го маргину.

Рішення

1. міняємо href на rel

Тут все просто, шукаємо в коді всі прив’язки до href і замінюємо на rel.

2. зводимо скрипт в функцію

2.1 Прибираємо з скрипта очікування завантаження DOM в самому початку документа js.js

$(document).ready(function() { // це треба прибрати

І прибираємо його закриття в кінці документа.

}); // це теж треба прибрати

2.2 Обертаємо скрипт в функцію

function mygoodslider( // закидаємо весь код слайдера в функцію mygoodslider(), для спрощена його налаштування
speed, // параметр — швидкість появи кожного фрагменту (оптимальний варіант — 500)
delay, // затримка появи наступного фрагмента, після початку появи попереднього (оптимальний варіант — 50)
fragments, // кількість фрагментів (оптимальний варіант — 20) (цей параметр повинен бути дільником ширены зображення НАЦІЛО!)
classname, // тут все зрозуміло — указывем клас діва, який засунули зображення
effect // тут пишемо який ефект хочемо використовувати
/*
ВАРІАНТИ ЕФЕКТІВ
fade — плавний поява фрагмента з прозорого непрозорий;
wave — врагмент з’являється використовую анімацію show();
slide — фрагмент з’являється, відкриваючись зверху вниз;
toup — фрагмент падає зверху;
todown — фрагмент вилазить знизу;
toupdown — фрагмент вилазить знизу, а наступний падає зверху, і так чергуючись;
roll — фрагменти відкриваються зліва на право
*/
)
{

Відповідно закриваємо цю функцію в кінці скрипта.

} // закриваємо тіло функції

2.3 Визначаємо змінні

На початку тіла функції визначаємо значення змінних, які нам потрібно буде використовувати.

var theclass = «.» + classname; // визначаємо клас як селектор
var sldimgl = $(‘.myslider img’).size(); // обчислюємо кількість картинок для слайдера
var showspeed = speed;
var interval = delay;
var coustfrags = fragments;
var tofrags = coustfrags — 1; // пам’ятаємо, що перерахування елементів у масиві починається з «0» і з цього останнє значення буде менше на одиницю!
var linmx = sldimgl — 1; // зменшуємо кількість на 1, так як при отбражении порядкого номери, JS починає з «0», а не з «1»

2.4 Запускаємо функцію в head нашої сторінки

Після підключення jquery і нашого слайдера вставляємо короткий скрипт запуску функції.

$(document).ready(function() {
mygoodslider(
500, // speed
50, // delay
20, // fragments
‘myslider’, // classname
‘toupdown’ // effect
);
});

3. Застосування переданих параметрів функції

3.1 fragments

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

Цей рядок:

var slfrag = «

«;

Замінюємо на цей цикл:

var slfrag = «»;
for(var i=0;i<=tofrags;i++)
{
var spr = slfragw * i;
var sprite = «-» + spr + «px»; // визначаємо положення спрайту у фрагменту
var slfrag = slfrag + «

«; // створюємо фрагмент і приліплюваний до попереднього
}

3.2 Застосовуємо параметр класу до об’єктній орієнтування

Тут потрібно покопатися і повставляти в селектори змінну «theclass».

Наприклад, рядок вставляющая слайд:

$(‘.myslider’).prepend(slideoun); // вставляємо тільки що створений слайд

Замінюється на:

$(theclass).prepend(slideoun); // вставляємо тільки що створений слайд

Природно всі елементи слайдера, такі як, наприклад, фрагменти повинні вылавливаться як:

$(theclass + ‘element’);

3.3 Застосовуємо ефект, швидкість і затримку

Для вирішення цієї задачі ми виправимо цикл появи фрагментів.

Старий цикл:

$(‘.sldlink’).click(function(e) { // виловлюємо подія — клік по посиланню слайдера
e.preventDefault(); // забороняємо браузеру перехід за посиланням
var item1 = $(this).attr(‘href’); // висмикуємо href посилання
var item = ‘#’ + item1; // робимо з нього id
if($(item).attr(‘dir’) == ‘b1’) {} // перевіряємо чи не веде посилання на поточний слайд. Якщо так, то куримо
else { // якщо ні, то працюємо
$(item + ‘div’).hide(); // ховаємо фрагменти цього слайда
$(item).show(); // показуємо сам слайд
$(«.slide[dir = ‘b1’]»).css({‘z-index’:’2′}); // утапливаем минулий слайд по осі z на другий рівень
$(item).css({‘z-index’:’3′}).attr(‘dir’,’b2′); // видавлюємо наш слайд по осі z на третій рівень і присваеваем йому dir з’являється слайда
for(var i=0;i<=3;i++) // запускаємо цикл появи фрагментів слайда
{
var del = i * 100; // змінна del встановлює довжину затримки коявления фрагмента в мілісекундах
if(i != 3) // перевіряємо чи не є фрагмент останнім
{
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).show(500); // якщо немає, то просто його открваем
}
else
{
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).show(500, function() { // якщо так, то відкриваємо його і…
$(«.slide[dir = ‘b1’]»).hide().css({‘z-index’:’1′}).attr(‘dir’,’b0′); // утапливаем минулий слайд на перший рівень по осі z робимо йому dir невидимого
$(item).attr(‘dir’,’b1′); // нашому слайда робимо dir поточного
$(‘.sldlink’).css({‘background’:’url(img/link.png) no-repeat center top’}); // повертаємо фон всіх посилань на вихідну
$(«.sldlink[href='» + item1 + «‘]»).css({‘background’:’url(img/link.png) no-repeat center -20px’}); // зрушуємо фон кликнутой посилання вгору
});
}
}
}
});

Замінюємо на новий:

$(theclass).next(‘.slnav’).children(‘.sldlink’).click(function(e) { // виловлюємо подія — клік по посиланню слайдера
e.preventDefault(); // забороняємо браузеру перехід за посиланням
var item1 = $(this).attr(‘rel’); // висмикуємо href посилання
var item = ‘#’ + item1; // робимо з нього id
if($(item).attr(‘alt’) == ‘b1’) {} // перевіряємо чи не веде посилання на поточний слайд. Якщо так, то куримо
else { // якщо ні, то працюємо
$(item + ‘div’).hide(); // ховаємо фрагменти цього слайда
$(item).show(); // показуємо сам слайд
$(theclass + » .slide[alt=b1]»).css({‘z-index’:’2′}); // утапливаем минулий слайд по осі z на другий рівень
$(item).css({‘z-index’:’3′}).attr(‘alt’,’b2′); // видавлюємо наш слайд по осі z на третій рівень і присваеваем йому alt з’являється слайда
$(this).css({‘background’:’url(img/link.png) no-repeat center -20px’});
for(var i=0;i<=tofrags;i++) // запускаємо цикл появи фрагментів слайда
{
var del = i * interval; // змінна del встановлює довжину затримки коявления фрагмента в мілісекундах
if(i != tofrags) // перевіряємо чи не є фрагмент останнім
{
if(effect == «roll») // якщо ефект задано roll
{
var wi = $(item + ‘ div:eq(‘ + i + ‘)’).width();
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).css({‘width’:’0px’}).show().animate({‘width’: wi }, showspeed); // якщо немає, то просто його открваем
}
else if(effect == «fade») // якщо ефект задано fade
{
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).fadeIn(showspeed);
}
else if(effect == «slide») // якщо ефект задано slide
{
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).slideDown(showspeed);
}
else if(effect == «toup») // якщо ефект задано toup
{
var he = $(item + ‘ div:eq(‘ + i + ‘)’).height();
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).css({‘margin-top’:’-‘ + he + ‘px’}).show().animate({‘margin-top’:’0px’}, showspeed);
}
else if(effect == «todown») // якщо ефект задано todown
{
var he = $(item + ‘ div:eq(‘ + i + ‘)’).height();
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).css({‘margin-top’: he + ‘px’}).show().animate({‘margin-top’:’0px’}, showspeed);
}
else if(effect == «toupdown») // якщо ефект задано toupdown
{
var he = $(item + ‘ div:eq(‘ + i + ‘)’).height();
if(i == 0) {var mar = ‘-‘ + he + ‘px’;}
else if(i & 1){var mar = he + ‘px’;} else {var mar = ‘-‘ + he + ‘px’;}
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).css({‘margin-top’: mar}).show().animate({‘margin-top’:’0px’}, showspeed);
}
else if(effect == «wave») // якщо ефект задано wave
{
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).show(showspeed);
}
} // якщо останній фрагмент
else
{
if(effect == «roll») // якщо ефект задано roll
{
var wi = $(item + ‘ div:eq(‘ + i + ‘)’).width();
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).css({‘width’:’0px’}).show().animate({‘width’: wi }, showspeed, function() { // якщо так, то відкриваємо його і…
$(«.slide[alt=b1]»).hide().css({‘z-index’:’1′}).attr(‘alt’,’b0′); // утапливаем минулий слайд на перший рівень по осі z робимо йому alt невидимого
$(item).attr(‘alt’,’b1′); // нашому слайда робимо alt поточного
$(‘.sldlink’).css({‘background’:’url(img/link.png) no-repeat center top’}); // повертаємо фон всіх посилань на вихідну
$(«.sldlink[rel=» + item1 + «]»).css({‘background’:’url(img/link.png) no-repeat center -40px’}); // зрушуємо фон кликнутой посилання вгору
});
}
else if(effect == «fade») // якщо ефект задано fade
{
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).fadeIn(showspeed, function() { // якщо так, то відкриваємо його і…
$(«.slide[alt=b1]»).hide().css({‘z-index’:’1′}).attr(‘alt’,’b0′); // утапливаем минулий слайд на перший рівень по осі z робимо йому alt невидимого
$(item).attr(‘alt’,’b1′); // нашому слайда робимо alt поточного
$(‘.sldlink’).css({‘background’:’url(img/link.png) no-repeat center top’}); // повертаємо фон всіх посилань на вихідну
$(«.sldlink[rel=» + item1 + «]»).css({‘background’:’url(img/link.png) no-repeat center -40px’}); // зрушуємо фон кликнутой посилання вгору
});
}
else if(effect == «slide») // якщо ефект задано fade
{
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).slideDown(showspeed, function() { // якщо так, то відкриваємо його і…
$(«.slide[alt=b1]»).hide().css({‘z-index’:’1′}).attr(‘alt’,’b0′); // утапливаем минулий слайд на перший рівень по осі z робимо йому alt невидимого
$(item).attr(‘alt’,’b1′); // нашому слайда робимо alt поточного
$(‘.sldlink’).css({‘background’:’url(img/link.png) no-repeat center top’}); // повертаємо фон всіх посилань на вихідну
$(«.sldlink[rel=» + item1 + «]»).css({‘background’:’url(img/link.png) no-repeat center -40px’}); // зрушуємо фон кликнутой посилання вгору
});
}
else if(effect == «wave») // якщо ефект задано wave
{
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).show(showspeed, function() { // якщо так, то відкриваємо його і…
$(«.slide[alt=b1]»).hide().css({‘z-index’:’1′}).attr(‘alt’,’b0′); // утапливаем минулий слайд на перший рівень по осі z робимо йому alt невидимого
$(item).attr(‘alt’,’b1′); // нашому слайда робимо alt поточного
$(‘.sldlink’).css({‘background’:’url(img/link.png) no-repeat center top’}); // повертаємо фон всіх посилань на вихідну
$(«.sldlink[rel=» + item1 + «]»).css({‘background’:’url(img/link.png) no-repeat center -40px’}); // зрушуємо фон кликнутой посилання вгору
});
}
else if(effect == «toup») // якщо ефект задано toup
{
var he = $(item + ‘ div:eq(‘ + i + ‘)’).height();
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).css({‘margin-top’:’-‘ + he + ‘px’}).show().animate({‘margin-top’:’0px’}, showspeed, function() { // якщо так, то відкриваємо його і…
$(«.slide[alt=b1]»).hide().css({‘z-index’:’1′}).attr(‘alt’,’b0′); // утапливаем минулий слайд на перший рівень по осі z робимо йому alt невидимого
$(item).attr(‘alt’,’b1′); // нашому слайда робимо alt поточного
$(‘.sldlink’).css({‘background’:’url(img/link.png) no-repeat center top’}); // повертаємо фон всіх посилань на вихідну
$(«.sldlink[rel=» + item1 + «]»).css({‘background’:’url(img/link.png) no-repeat center -40px’}); // зрушуємо фон кликнутой посилання вгору
});
}
else if(effect == «todown») // якщо ефект задано todown
{
var he = $(item + ‘ div:eq(‘ + i + ‘)’).height();
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).css({‘margin-top’: he + ‘px’}).show().animate({‘margin-top’:’0px’}, showspeed, function() { // якщо так, то відкриваємо його і…
$(«.slide[alt=b1]»).hide().css({‘z-index’:’1′}).attr(‘alt’,’b0′); // утапливаем минулий слайд на перший рівень по осі z робимо йому alt невидимого
$(item).attr(‘alt’,’b1′); // нашому слайда робимо alt поточного
$(‘.sldlink’).css({‘background’:’url(img/link.png) no-repeat center top’}); // повертаємо фон всіх посилань на вихідну
$(«.sldlink[rel=» + item1 + «]»).css({‘background’:’url(img/link.png) no-repeat center -40px’}); // зрушуємо фон кликнутой посилання вгору
});
}
else if(effect == «toupdown») // якщо ефект задано toupdown
{
var he = $(item + ‘ div:eq(‘ + i + ‘)’).height();
if(i == 0) {var mar = ‘-‘ + he + ‘px’;}
else if(i & 1){var mar = he + ‘px’;} else {var mar = ‘-‘ + he + ‘px’;}
$(item + ‘ div:eq(‘ + i + ‘)’).delay(del).css({‘margin-top’: mar}).show().animate({‘margin-top’:’0px’}, showspeed, function() { // якщо так, то відкриваємо його і…
$(«.slide[alt=b1]»).hide().css({‘z-index’:’1′}).attr(‘alt’,’b0′); // утапливаем минулий слайд на перший рівень по осі z робимо йому alt невидимого
$(item).attr(‘alt’,’b1′); // нашому слайда робимо alt поточного
$(‘.sldlink’).css({‘background’:’url(img/link.png) no-repeat center top’}); // повертаємо фон всіх посилань на вихідну
$(«.sldlink[rel=» + item1 + «]»).css({‘background’:’url(img/link.png) no-repeat center -40px’}); // зрушуємо фон кликнутой посилання вгору
});
}
}
}
}
});

Як бачите, в цьому ж відрізку ми додали нові ефекти

Висновок

Модернізуйте, персоналізуйте, застосовуйте. Особисто я збираюся зробити з цього додатка потужний і якісний продукт з відкритим вихідним кодом. Дуже цікава, мені стала ця тема…

Ваші запитання, відгуки чекаю в коментарях

З повагою Михайло Бєляєв