Топ плъгини JQuery

Така че, нека да разгледаме примери за работа с fancyBox на плъгин - един от най-добрите по рода си и, може би, любимата ми плъгин лайтбоксът, защото аз го използвам почти всеки вашия проект.

Изтеглете fancyBox текущата версия (версия 2.1.5, както и на това писание) и свържете файлове.

За него са необходими файлове, останалите файловете са по желание плъгин. Сега нека да добавите Лайтбокс ефект за едно изображение. Разделянето може да бъде по този начин:

Съвременните технологии за уеб програмиране

AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране

За да направите справка с оригиналното (голяма) образ ние се fancybox клас, на която и ще формират колекция JQuery и се обадете на метод, използван fancybox плъгин. Сега, нека се обади на съответния метод:

Сега, когато кликнете върху миниатюра в модален прозорец ще покаже оригиналното изображение. В този случай, на външния вид на изображението ще бъде придружено от хубава анимация.

FancyBox също така ви позволява да групирате изображения, създаване на галерия, това е достатъчно, за да добавите снимките групирани отн атрибут с една и съща стойност. Нека добавим още няколко снимки и да ги комбинирате в една група.

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

Между другото, значително предимство fancyBox е неговата адаптивност. Можете да опитате да преоразмерява прозореца на браузъра - тя автоматично ще се настрои според размера на прозореца.

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

И, разбира се, приставката ни предлага много възможности. използване на която можем да настроим fancyBox под него, за да промените анимация ефект, проектиране, събития и др.

На тази днес. Източници на статия, можете да изтеглите от тук. Повече за JQuery и JQuery UI библиотека можете да научите от нашата уроци или курс. На добър час!

Съвременните технологии за уеб програмиране

AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране

Най-IT новини и уеб разработки на нашия канал Телеграма