Създайте отзивчива и красива пълна страница Lightbox с BaguetteBox.js

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

Но един от любимите ми нови плъгини е baguetteBox.js, създаден от разработчика на JavaScript Marek Grzybek.

Разбира се, този плъгин е напълно свободен за използване и е отворен в GitHub, ако искате да копаете в кода ръчно.

Библиотеката няма никакви зависимости, така че можете да го стартирате без jQuery, Zepto или нещо друго. Това е чиста JavaScript библиотека с много проста настройка.

Това е предназначено работи перфектно на мобилни устройства, така че може да поддържа swipes и кранове, заедно с поведението по подразбиране на настолни компютри и лаптопи. Това е една от малкото галерии на цял екран поддържа мобилни взаимодействия, заедно с пълен модален ефект.

Разгледайте демо страница да я видим в действие. Той разполага с напълно оборудвана галерия, заедно с един ред код, необходим, за да работи:

 baguetteBox.run ( ". baguetteBoxOne '); 

Така че, това насочва към контейнерния елемент с класа .baguetteBoxOne и цялата галерия работи извън това.

Можеш задайте потребителски опции ако желаете неща като надписи, стилове на бутони, функции за предварително зареждане и методи за обратно извикване за събития с onclick / onchange. Всички тези опции са добре документирани в GitHub ако искаш да се гмурнеш.

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

Ти имат пълен контрол над анимациите, размерите на изображенията, ефектите на тласък и съдържанието на галерията, като заглавия / надписи. Това изисква JavaScript, така че няма чиста CSS алтернатива на модела. Но тъй като повечето браузъри поддържат JavaScript, това не би трябвало да е проблем.

За да научите повече, посетете главната страница на baguetteBox.js и можете също да споделите мислите си с създателя на Twitter @feimosi.