Как да си направим ротатор на картинки с JavaScript

Съвсем наскоро, във връзка с един от курсовете, които посещавам в момента, ми се наложи да правя статичен уебсайт по даден дизайн. В даденото psd беше предвидено да има нещо като панел, в който се сменят различни публикации (новини с картинки и допълнителна информация) като функционалността изискваше както автоматично сменяне, така и ръчно чрез бутони напред / назад. Под въпросния панел има и част с т. нар. thumbnails, които представляват малък размер на това, което се изобразява горе. Ако се click-не на тях, автоматично картинката горе се сменя с текущата посочена. Цялото това нещо е подобно на widget и е по-известно като image rotator.
Подобни ротатори на картинки (и не само картинки, а цели панели с информация) може да откриете на сайтове като Yahoo, playlist-а на YouTube и още куп други.

В настоящият урок ще ви покажа как сами да си направите нещо подобно:

Демонстрация

Какво ще ни е нужно за целта?

  • Познания по HTML, CSS, JavaScript  (+ библиотеката jQuery).
  • Сорс код редактор, за демото съм ползвал Notepad++.
  • Някакъв опростен редактор за картинки, може да се ползва и Paint.
    Ще ви трябва за оразмеряване на картинките и crop-ване на малките thumbnails по-късно.
  • Малко свободно време, желание и готини идеи.

Какво точно ще направим и как ще изглежда?

За демонстрацията реших да направя съвсем семпъл вариант на image rotator. Вие сами може да експериментирате, да направите коренно различни неща, по-богати на съдържание, стил и функционалност. Няма да влизам в детайли относно html-а и стиловете използвани в моя вариант. Накратко имам контейнер, в който се съдържат ротатора и панелчето с малки картинки под него. Ротаторът има два бутона за навигация между картинките и средна част с големия формат на картинките (новината или статия с различно съдържание). Под тях има панелче, в което се визуализират малките картинки (thumbnails). Добавени са някои ефекти, като смяна на фона с бял при hover на мишката и оранжев при показване на текущата картинка. Накрая на тази публикация ще откриете link към целия проект и сорс код, които съм ползвал и ще може да видите самата структура и стилизиране на елементите.

По какъв начин функционира въртенето и как да го направим?

Тук идва същинската част. За по-лесно ориентиране, докато четете, може да отворите script файла от този адрес и да следите кода заедно с обясненията.

Ще започнем с променливите. Нуждаем се от един предварително деклариран масив imageURLArray, в който да се съдържат имената на файловете с големи картинки, включително разширението им. Пътят до тях няма да се специфицира тук. Останалите променливи са съответно imgHolder, която по-късно при зареждането на страницата ще открие елемента, чиято фонова картинка ще променяме, nextPictureToShow – индекс на следващата картинка за показване, refreshedIntervalId – ще я ползваме, за да стопираме и подновяваме автоматичното въртене и smallContainers, в която ще се съдържат всички елементи с малки картинки от крайния долен панел.

В моментът, в който страницата е заредена ($(document).ready(function() { … }) и всички елементи на нейното DOM дърво са правилно възприети и конструирани,
променливите ще бъдат инициализирани. Ще открием всички div-чета с клас SmallPic, който държат thumbnail-овете на големите картинки. В imgHolder ще запишем и елемента, който държи за фон главната голяма картинка на rotator-а.
Даваме начална стойност на индексатора 0 и продължаваме напред. За всеки от div-овете с малки картинки присвояваме следните event-и:
mouseover – когато курсора на мишката е над съответния елемент, към него ще се добавя клас .HoveredPic, който ще сменя фона на контейнера с бял и ще слага познатата ръчичка за курсор.
mouseout – просто ще премахва гореспоменатия клас, връщайки стиловете, както са били преди това.
click – ще извика функцията ChangeRotatorPic с параметър index сочещ към текущо извикания обект.

Ще обясня отделните методи малко по-надолу, но първо да приключим с първоначалните инициализации и извиквания при зареждане на страницата.
Останалото от тази част е закачането на event-а click за бутона наляво със съответното извикване на метода PreviousPicture() и този за надясно NextPicture().
За финал, викаме методът StartRotator(), който пуска автоматичното въртене на картинките.

ОТДЕЛНИТЕ МЕТОДИ

function StartRotator()
{
refreshedIntervalId = window.setInterval(“RotateImages()”, 3500);
}

Накратко, задавайки тази стойност на променливата, чрез методът setInterval ние заявяваме, че на всеки 3,5 секунди ще бъде извиквана функцията RotateImages().
Със съдържащите се в RotateImages() условия, въртенето ще продължава безкрайно. По-късно ще разберем как да го спрем и в кои случаи ще е нужно.
Повече за метода setInterval – тук и тук.

RotateImages()

В този основен метод правим няколко стъпки. Чрез eval() се изпълняват различни statement-и или се изчисляват изрази. Върнатите обекти могат да се ползват по-напред в работата с различни методи на чистия JavaScript или библиотеката към него jQuery. Правим проверка дали не излизаме от размера на масива с картинките. Ако това е така, връщаме стойността на nextPictureToShow на 0 (по този начин осигуряваме преминаването от последна към първа картинка). Със следващия ред
var urlToImg = “url(img/” + array[nextPictureToShow] + “)”;
създаваме променливата, която ще ползваме като стойност на свойството background на елемента, който държи главната картинка. Библиотеката jQuery предоставя изключително удобни методи за директен достъп до елемента и неговите свойства. В този случай ще работим директно върху стиловете му чрез .css(), който приема като параметрите property и value. Нагласяме някои други свойства на фоновото изображение. Премахваме предишно добавения клас .ClickedPic, а после го добавяме само за текущия елемент.
$(“.SmallPic”).eq(nextPictureToShow) обхожда всички елементи с клас .SmallPic, но връща онзи от колекцията, което е с индекс nextPictureToShow.
В jQuery, разликата между .eq(n) и .nth-child(n) е в това, че при eq n е 0-базирано, а при nth-child броенето започва от 1.
Голямата ни картинка е вече сменена, както и фона на малката, която й отговаря и стои под нея. Увеличаваме nextPictureToShow с 1 за следващата итерация.

PreviousPicture()

Този метод се вика при натискане бутона наляво за ръчна смяна на картинката (спомняте си event-а, който закачихме по-нагоре, нали?!). По-особеното е if-else частта. Ако nextPictureToShow е 0 или 1, то ние сме все още на първата картинка. Или сме заредили страницата и веднага сме натиснали назад, стойността е още 0 и не е увеличена, или RotateImages() е минало вече веднъж и стойността е 1. И в двата случая, трябва да зададем стойност на променливата равна на последния валиден индекс от масива с картинки. Така, когато сме на първата картинка и дадем назад или наляво, ще ни бъде показана последната, което е очакваното преминаване.

В противен случай, намаляме стойността на променливата за индекса с 2.
Тук идва важния момент с изпълнението на clearInterval(refreshedIntervalId);
По този начин “нулираме” таймера и прекратяваме изпълнението на RotateImages() на всеки 3 секунди и половина. Извикваме RotateImages(), за да изпълни смяната и след това стартираме отново автоматичното сменяне чрез StartRotator().

NextPicture()

работи по общо взето същия начин като предния метод. Разликата е единствено в проверката. Ако натиснем веднага след зареждане на страницата бутона за следваща снимка, може да сме изпреварили събитията с инкрементацията и смяната да зацикли. Затова, ако е 0, увеличаваме с 1, за да е всичко ОК.

ChangeRotatorPic(itemNumber)

Това е закачения за event-a click метод. Присвояваме на nextPictureToShow стойността на itemNumber, зачистваме таймера, викаме RotateImages() и накрая стартираме отново автоматичния ротатор.

Да не повярва човек, но това е всичко!

“Омръзна ми да чета, не разбрах нищо и искам код … “

Ако сте scroll-нали дотук в гнева си (ако вече не сте натиснали X-а на браузъра), ще ви разбера. Всички сме изпадали в това положение, когато думите просто не са достатъчни. Затова, ще си спазя обещанието като ви дам адрес към архивче с целия проект и всички файлове към него.

Целият сорс код и файловете към проекта

 

С този урок се опитах да ви покажа един от начините да си направим по сравнително лесен и бърз начин image rotator с възможност за автоматично и ръчно сменяне на съдържанието. Надявам се тези знания да ви послужат като основа за създаването на нещо далеч по-функционално, красиво и приложимо в бъдещите проекти, по които ще работите. Желая ви успех! : )

Харесва ли ви това? Споделете: