Lightbox в Taptop
Дата
July 16, 2025
Тема
Разработка
Новая функция настраиваемых атрибутов Taptop позволяет легко добавлять галереи лайтбоксов Fancybox, не касаясь HTML.
Давайте рассмотрим пример, когда при нажатии на изображение открывается галерея лайтбоксов с помощью Fancybox — и все это работает в Taptop.
В настройках проекта или внутри <head> тега включите следующие ссылки CDN:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>В Taptop выберите виджет изображения Image и присвойте ему собственный атрибут:
data-fancybox="gallery"Это сгруппирует изображения в один набор галерей.
Вставьте следующий скрипт в нижней части страницы (перед закрывающим тегом body):
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll('[data-fancybox="gallery"]').forEach(function (item) {
const img = item.querySelector("img");
if (img && !item.hasAttribute("data-src")) {
item.setAttribute("data-src", img.getAttribute("src"));
item.style.cursor = "zoom-in";
}
});
Fancybox.bind("[data-fancybox]", {
animationEffect: "fade",
transitionEffect: "fade",
transitionDuration: 500,
closeEffect: "fade",
});
});
</script>
Вот и все! Теперь при нажатии на изображение оно откроется в анимированном модальном окне.
Добавление настраиваемых атрибутов в Taptop это огромный шаг вперед. Он позволяет дизайнерам и разработчикам сочетать визуальное редактирование с гибкими и мощными скриптами, не жертвуя чистым кодом.
Этот пример Fancybox показывает, как легко можно улучшить веб-сайт, сочетая визуальные инструменты с современными библиотеками JavaScript.
Теперь, когда ваш клиент попросит создать адаптивную анимированную галерею изображений, вы точно знаете, как это сделать.
