Создайте адаптивный и красивый лайтбокс на всю страницу с BaguetteBox.js
Есть десятки плагинов лайтбоксов, и все они отлично подходят по разным причинам. Некоторые лучше работают на сайтах портфолио, другие лучше всего подходят для адаптивных макетов.
Но один из моих любимых новых плагинов – baguetteBox.js, созданный разработчиком JavaScript Marek Grzybek.
Конечно, этот плагин полностью бесплатен для использования и с открытым исходным кодом на GitHub если вы хотите копаться в коде вручную.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Библиотека не имеет каких-либо зависимостей, поэтому вы можете запустить ее без jQuery, Zepto или чего-либо еще. Это чистая библиотека JavaScript с очень простой настройкой.
Читайте также: 25 бесплатных плагинов для слайдшоу для WordPress – Best of
Он предназначен для идеальной работы на мобильных устройствах, поэтому он может поддерживать прокрутки и нажатия, а также поведение по умолчанию на настольных компьютерах и ноутбуках. Это одна из немногих полноэкранных галерей, которые поддерживают мобильное взаимодействие наряду с полным модальным эффектом.
Проверьте демонстрационная страница увидеть это в действии. Он имеет полнофункциональную галерею и одну строку кода, необходимую для его работы:
baguetteBox.run ( ‘baguetteBoxOne’);
Таким образом, это предназначается для элемента контейнера с классом .baguetteBoxOne, и вся галерея работает на этом.
Вы можете установить пользовательские параметры, если вы хотите такие вещи, как заголовки, стили кнопок, функции предварительной загрузки и методы обратного вызова для событий onclick / onchange. Все эти варианты хорошо документированы на GitHub если вы хотите погрузиться в.
Но это действительно не займет много времени, чтобы выйти за рамки элемента контейнера и некоторых основных элементов изображения.
Вы имеете полный контроль над анимацией, размерами изображений, эффектами смахивания и содержимым галереи, такими как заголовки / подписи. Это требует JavaScript, поэтому у него нет чистой CSS-альтернативы модальному. Но, поскольку большинство браузеров поддерживают JavaScript, это не должно быть проблемой.
Чтобы узнать больше, посетите главная страница baguetteBox.js и вы также можете поделиться своими мыслями с создателем в Twitter @feimosi,
Читайте также: Полноэкранные слайд-шоу Lightbox с Lightgallery.js
<script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)