URL скопирован в буфер обмена!
Как сделать увеличение изображения в галерее Zero Block на Tilda?
С помощью этой модификации можно настроить плавное увеличение изображения в галерее зеро блок чтобы сделать блоки более динамичными. Можно настроить скорость анимации и степень увеличения.
Модификация работает с включенным Autoscale в блоках
Модификация работает только c Zero Block
Номер модификации в библиотеке TiCode
Класс галереи
Процент зума
Скорость зума в секундах
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD134--><script>
document.addEventListener("DOMContentLoaded", function () {
const TCDzoomPrc = 1.1;
const TCDtransitTimeSlide = 3;
function NewticodezeroGall() {
const TCDspeedMsTilda = TCDtransitTimeSlide * 1000;
const TildaGalleryTC = document.querySelectorAll('.tc-zoomgallery .t-slds__item');
if (!TildaGalleryTC.length) return;
TildaGalleryTC.forEach(slide => {
const img = slide.querySelector('.tn-atom__slds-img');
if (img) {
img.style.transition = `transform ${TCDspeedMsTilda}ms ease`;
img.style.transformOrigin = 'center center';
}
});
function TicodeZoomeGallery() {
TildaGalleryTC.forEach(slide => {
const img = slide.querySelector('.tn-atom__slds-img');
if (!img) return;
if (slide.classList.contains('t-slds__item_active')) {
img.style.transform = `scale(${TCDzoomPrc})`;
} else {
img.style.transform = 'scale(1)';
}
});
}
TicodeZoomeGallery();
const TCDzerowarper = document.querySelector('.tc-zoomgallery .t-slds__items-wrapper');
if (TCDzerowarper) {
const TIldaTiobs = new MutationObserver(TicodeZoomeGallery);
TIldaTiobs.observe(TCDzerowarper, { attributes: true, subtree: true });
}
}
NewticodezeroGall();
});
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. Создаем в зеро блок галерею и присваиваем ей класс tc-zoomgallery
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. В генераторе кода указываем дополнительные настройки:
Процент зума - указываем уровень зума изображения от 1 до до 2. Например 1.1 это зума на 10 процентов, 1.95 это зум на 95%
Скорость зума в секундах - указываем время за которое будет увеличивать один слайд
3. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. В генераторе кода указываем дополнительные настройки:
Процент зума - указываем уровень зума изображения от 1 до до 2. Например 1.1 это зума на 10 процентов, 1.95 это зум на 95%
Скорость зума в секундах - указываем время за которое будет увеличивать один слайд
3. Копируем готовый код и вставляем в HTML блок T123. Блок кода размещаем под зеро блоком.
