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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

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

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

baguetteBox.run ( ‘baguetteBoxOne’);

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

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

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

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

            <script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *