12 полезни jQuery плъгина за създаване на slideshow 13
Сподели урока
Харесваш ли елегантните и изчистени slideshow галерии? А мислил/а ли си да създадеш своя собствена? Повярвай ми, съвсем не е толкова трудно, колкото изглежда. В тази колекция от 12 свежи jQuery плъгина ще намериш точното това, което ти е нужно, за да създадеш едно незабравимо slideshow преживяване.
[Обновена: 20.09.2012]
В коментарите към поста започнахме доста интересна дискусия дали е добре да се поясняват термините използвани в урока/поста. Смятам, че мнението на всеки е от значение, и че всеки има правото да го сподели. Тъй като този пост е насочен към по-напреднали в уеб разработването, реших да пропусна всякакъв вид разяснения относно jQuery. И смятам да го запазя така. За да уважа мнението на хората, които не знаят какво всъщност е jQuery, ще създам отделен урок, в който ще опиша най-важното, което трябва да се знае.
[Обновена: 21.10.2012]
Урока е качен. Ако си начинаещ/-а в jQuery и искаш да научиш нещо повече за това, може би е добра идея, ако първо разгледаш урока “Въведение в jQuery”. В него ще откриеш две основни неща - “Какво е jQuery?” и “Какво е плъгин?”
Camera slideshow
Елегантен и същевременно лесен за използване плъгин. Има богат избор на опции, чрез които можеш да настроиш работата на му спрямо твоите изисквания. Освен всичко това, плъгина е напълно безплатен и е с отворен код, което значи, че ти също можеш да предложиш промени и/или подобрения.
Nivo Slider
Свален повече от 1,5 милиона пъти, този плъгин е един от най-популярните в Интернет. Слави се с 16 уникални ефекта, чист и валиден код, множество настройки, 3 теми и много други. Също така от Nivo Slider твърдят, че галериите създадени с този плъгин са responsive, което ще ги направи достъпни под множество различни резолюции.
FlexSlider
Друг широко популярен jQuery плъгин за създаване на слайдшоу. Този плъгин идва с огромно количество настройки, което го прави приспособим към всеки сайт. Можеш да го приложиш в 3 лесни стъпки, което ще ти отнеме не повече от 10 мин.
WOW Slider
WOW Slider е responsive плъгин с множество ефекти и професионално направени шаблони. Създателите му го обновяват доста често като добавят нови и нови подобрения. Този плъгин е лесен за употреба, а на сайта му можеш да намериш подробни уроци за работа с него.
AnythingSlider
Доста солиден слайдшоу плъгин базиран на jQuery. Свойствата му са твърде много, за да ги изброявам, но определено има какво да предложи. Документацията е също доста подробна и ще ти помогне да се “измъкнеш” от всякакво положение. Кода може да бъде свален от GitHub.
Cycle
Слайдшоу плъгин, който предоставя различни видове преходни (transition) ефекти. Поддържа pouse-on-hover, auto-stop, click triggers и много други. Разгледай ги, за да придобиеш по-добра представа. Прилагането на този плъгин е доста лесно и не изисква големи технически умения.
rcarousel
Този плъгин е базиран на jQuery UI, но с много повече черти. Лесен е за употреба, всяка снимка може да бъде линк, позволява създаването на множество галерии в една страница, вертикални и хоризонтални галерии, автоматична смяна на снимките, добра браузърна поддръжка (дори IE 7) и много други.
Rhinoslider
Rhinoslider е гъвкав слайдер с множество ефекти. Може да бъде използван като обикновена галерия или слайдшоу с богати ефекти. Този плъгин се слави със своята лесна и интуитивна употреба. На сайта дори има инструмент, чрез който ти самият можеш да създаден свой уникален ефект. Кода се генерира автоматично, а ти само трябва да го копираш.
Sequence.js
Responsive слайдер с усъвършенствани CSS3 преходи (transitions). Този плъгин не идва с готова тема, което ти дава възможността да създадеш свой собствен стил използвайки CSS3. Тестван е и работи под всички съвременни браузъри. Документацията е подробна и добре обяснена, така че, ако нещо те затрудни, да можеш съвсем лесно да го отстраниш.
Glise.js
Адаптивен и гъвкав jQuery плъгин, който изцяло можеш да настроиш спрямо твоите нужди. Някои от отличителните му черти са навигация чрез клавиатура, анимация изцяло направена с CSS3, 7 различни преходни ефекта и възможност за разглеждане на снимките в пълен екран.
μslider
jQuery плъгин, който е много лесен за употреба, защото има няколко основни настройки, които могат да бъдат променени по доста разбираем начин. Може да се промени височината и ширината, как да бъде стартирана анимацията и нейната продължителност, преходните ефекти, поддръжка на текст, видео и аудио. На сайта можеш да намериш примери с подробно обяснение.
ResponsiveSlider
ResponsiveSlider е лек и супер лесен за употреба слайдшоу плъгин, който идва със сравнително голямо количество опции. Както името ни подсказва, галериите създадени чрез този jQuery плъгин се приспособяват към различни резолюции. Някои от другите му черти са: множество слайдшоу галерии на една страница, работи безпроблемно под повечето съвременни браузъри, снимките могат да бъдат оградени с линк, малък размер на файла, интуитивен и изчистен код и много други.
Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.
Хареса ли ти урока? Сподели го със света :)
1
Здравей (:
Приятни галерии. Защо не направиш линковете да се отварят в нов таб?
Поздрави!
2
Здравей. Благодаря за идеята. Ще я обмисля и ще пробвам да я приложа :)
3
Здравей, Джават. Извинявам се обаче били обяснил какво е това jQuery? Аз лично за пръв път срещам това наименование и изобщо не знам за какво става въпрос. Сигурно някой който чете това ще се смее, обаче изобщо си нямам на идея какво е това. Имам и друга молба би ли дал дефиниция за "плъгин", за какво служи и какво е това?
Между другото ще си позволя едно предложение към теб тъй като си написал, че този сайт е направен за да помага. Предложението ми е следното: Слагай дефиниции, кратки и разбираеми, за аматьори като мен на наименования като "плъгин", "jQuery" и с каквито нови неща ни запознаваш.
Поздрави, Антон
4
Антон, на такива неща дефиниции не се дават. Това е като да говориш за подправка на супи и да даваш дефиниция на супа. Ако те интересува нещо какво е първо питай гугъл, ако той не знае тогава питай в някой форум. Ето ти какво е jQuery ама се съмнявам да разбереш, след като не знаеш що е плъгин. Иначе е хубаво, че си отделил време да прочетеш нещо, чието заглавие най-вероятно не ти говори нищо.
П.П. Не се заяждам, да не ме разбереш погрешно, просто не мисля че статията е за теб.
5
@Антон: Здравей. Благодаря за предложението. Съвсем скоро ще обновя поста и най-отгоре ще сложа кратки дефиниции на "jQuery" и "плъгин".
Също така в бъдещи уроци/постове ще се постарая да включвам и някакво обяснение на термините, които съм използвал. :)
@raxbg: Благодаря за коментара и полезните линкове. Наистина този пост е насочен за малко по-напреднали. Също така е вярно, че всеки има право да пита, дори и елементарни въпроси. Надявам се да бъдем коректни един към друг и да споделяме знанията и опита си. :)
6
Джават, не казвам да не се пита, а просто първо човека да се помъчи сам да намери отговорите. Защо трябва да си губи времето да пита тук вместо за същото време да пита в гугъл. И защо да чака не знайно колко време някой да отговори евентуално, вместо да прочете за половин минута това, което го интересува. Ясно е, че не на всичко си има отговори в гугъл, или поне не се намират толкова лесно, и тогава е нормално да се пита, да. И не мисля, че е добра идея да пишеш обяснения на термини в постовете си. Все пак, който чете такива неща се предполага че знае за какво иде реч. Виж ако е нещо специфично, тогава може да пишеш кратки описания, или просто да правиш непознатата дума, линк към дефиницията ѝ.
7
raxbg няма проблем, не съм те разбрал погрешно. От доста години имам сайт. Няма да му помествам линка, за да не се получи спамене. Джават знае кой е. Самоук съм и почти всички страници на сайта ми вече са Strict, което за мен е важно ... имайки в предвид индексирането му в Гугъл, огромния обема от работа и продажбите, които реализира самия сайт. Аз сам си го поддържам и съответно си ръководя и фирмата.
Питам по този начин, защото аз не съм професионалист и деня ми минава в сделки и разговори, които нямат нищо общо с материята тук, НО много голямо НО - тъй като сам се учех да си правя сайта и постоянно съм ползвал статии и уроци от Гугъл съм стигнал до извода, че не всяка информация в Гугъл е вярна и "съм губил доста време" и НЕРВИ. Тук, в сайта на Джават, за пръв път от толкова години насам намерих човек, който ПЕРСОНАЛНО помага или най-точно казано ме учи, дава ми конкретни примери които ги прилагам и те работят. Това е УНИКАЛНО. Никъде другаде, в който и да е сайт в България, не съм попадал на човек като Джават безвъзмездно да споделя знанията и опита си. Ето за това съм му задал въпроса за "jQuery" и "плъгин" по този начин.
raxbg относно статията може и да си прав, че не е за мен. Аз като цяло, едно че съм аматьор, едно че съм праволинеен тъй като сайта ми продава доста и аз като собственик винаги търся нещо, което да помогне за повишаването на продажбите му, а не толкова за неговата визия, но това е продиктувано от портфолиото ми и най-вече от клиентите ми. От друга страна продуктите, които предлагам аз са свързани с дефиниция и приложение и самите клиенти споделят че така е много разбираемо за тях. Ето затова по този начин му направих предложението.
Примера за "подправката за супи" е уникален. И при мен, в моята материя, е така и то ежеминутно.
Джават, ще чакам да пуснеш дефиниции, които са разбираеми и смилаеми та дори и примери, които си правил. Както казах, ще разчитам на теб, а не на Гугъл. Поздрави
8
Благодаря за откровения и позитивен коментар :)
Уроците/постовете, които качвам са изцяло насочени към теб и всички други, които имат желание да научат нещо повече за създаването на собствен уеб сайт. С течение на времето ще се опитам да споделям неща в различни теми, за да може повече хора да се възползват. Някои постове ще бъдат за начинаещи, други за по-напреднали. Друг път пък, ще споделям качествени ресурси. Ще се опитам да балансирам нещата, доколкото мога.
Твоето посещение в сайта, както и многото други, допълнително ме мотивира да продължавам да работя. Нямам намерение да изоставям сайта, затова се надявам да го направим добро място за споделяне на знание :)
9
Джават, имам идея, която не мога да реализирам сам. Сглобих си един часовник и календар. Има следния вид: Днес е 23 септември 2012 г. (неделя), 5:08:27 ч. след обед. Иска ми се е от доста време да му приложа стил, така че зад думите/цифрите да има фоново изображение. Но не ми достигат знанията. Има ли начин да ти пратя лично адреса за да видиш, както и пример, без да спамя излишно тук?
Разбира се нямам нищо против крайният резултат да бъде публикуван тук, за да се възползва всеки, за който представлява интерес.
Поздрави!
10
Здравей. Бих се радвал да ти помогна със съвети как да го направиш. Може би и с код, но предварително искам да ти кача, че не мога да отделя прекалено много време, защото съм доста зает. Свържи се с мен чрез e-mail. Можеш да го намериш в За мен. Поздрави
11
Гласувах в конкурса за сайта ти :)
Джават, вдяваш ли от swf флаш?
12
Благодаря ти за подкрепата :)
Какво имаш в предвид с swf флаш? Преди години се занимавах, но спрях, защото според мен тази технология няма светло бъдеще. Ако питането ти е за създаване на анимация или писане на ActionScript, тогава няма да успея да помогна. Ако пък проблема е с поставяне на swf в уеб страница, тогава може и да успея. Хвърли малко повече светлина :)
Поздрави.
13
Прощавай, че се запилях, бях извън града. Искам да стартирам флаш, което е ясно, но и да му добавя х за затваряне, с което да изчезне. Имаш ли идея как да се реализира? Доколкото гледам в нета java го реализира, а не промяна на самия флаш файл.
Поздрави!