Створіть чуйний і красивий повномасштабний лайтбокс з BaguetteBox.js

Існує десятки додатків для лайтбокса і всі вони прекрасні з різних причин. Деякі працюють краще на сайтах портфоліо, а інші краще для реагування макетів.

Але, один з моїх улюблених нових плагінів для використання baguetteBox.js, створений розробником JavaScript Marek Grzybek.

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

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

Це означає прекрасно працювати на мобільних пристроях, таким чином, він може підтримувати копії та крани, а також поведінку за умовчанням на настільних комп'ютерах та ноутбуках. Це одна з небагатьох повноекранних галерей підтримка мобільних взаємодій, разом з повним модальним ефектом.

Перевірте Демонстраційна сторінка бачити його жити у дії. Він має повнофункціональну галерею, а також один рядок коду, необхідний для його роботи:

 baguetteBox.run ('. baguetteBoxOne'); 

Отже, це націлює елемент контейнера на клас .baguetteBoxOne і вся галерея працює над цим.

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

Але, це дійсно не вимагає багато, щоб отримати це виходить за рамки контейнера елемент і деякі основні елементи зображення.

ти мати повний контроль над анімаціями, розмірами зображень, ефектами удару та вмістом галереї, наприклад, назв / підписів. Це вимагає JavaScript, так що він не має чистої альтернативи CSS до модального. Але, оскільки більшість браузерів підтримують JavaScript, це не повинно бути проблемою.

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