Создайте адаптивный и красивый лайтбокс на всю страницу с BaguetteBox.js

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

Но один из моих любимых новых плагинов - baguetteBox.js, создатель JavaScript разработчик Марек Грзыбек.

Конечно, этот плагин абсолютно бесплатен для использования и имеет открытый исходный код на GitHub, если вы хотите копаться в коде вручную.

Библиотека не имеет никаких зависимостей, так что вы можете запустить его без jQuery, Zepto или чего-либо еще. Это библиотека чистого JavaScript с очень простой настройкой.

Это предназначено для отлично работают на мобильных устройствах, поэтому он может поддерживать прокрутки и нажатия, а также поведение по умолчанию на настольных компьютерах и ноутбуках. Это одна из немногих полноэкранных галерей, которые поддержка мобильных взаимодействий, а также полный модальный эффект.

Проверьте демонстрационная страница увидеть это в действии. Он имеет полнофункциональную галерею, а также одна строка кода, необходимая для его работы:

 baguetteBox.run ( 'baguetteBoxOne'); 

Итак, это предназначается для элемента контейнера с классом .baguetteBoxOne и вся галерея работает на том, что.

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

Но это действительно не займет много времени, чтобы выйти за рамки элемента контейнера и некоторых основных элементов изображения.

Вы иметь полный контроль над анимацией, размерами изображений, эффектами прокрутки и содержимым галереи, такими как заголовки / подписи. это требует JavaScript, так что у него нет чистой CSS-альтернативы модальному. Но, поскольку большинство браузеров поддерживают JavaScript, это не должно быть проблемой.

Чтобы узнать больше, посетите главную страницу baguetteBox.js, а также поделитесь своими мыслями с создателем в Twitter @feimosi..