Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как при клике на миниатюры показать их в большой картинке в ZeroBlock в Tilda

Как при клике на миниатюры показать их в большой картинке в ZeroBlock в Tilda

1
Создали Zero-Block
2
Добавили в него 4 Shape для миниатюр с классом miniature
3
Добавили 1 большой Shape c классом banner
Загрузили в него картинку как и в первой миниатюре
4
Добавили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём миниатюрки и один общий баннер.
Выводим картинки из миниатюр в баннер
Фрагмент видео
Библиотека для примера
<style>
.miniature .tn-atom{
    cursor:pointer;
    transition: all 0.2s ease-in-out;    
}
.miniature .currentminiature{
    box-shadow: 0 0 0px 2px #fdc359;
} 
</style>


<script>
document.addEventListener('DOMContentLoaded', () => {
    function pastepic(imgsrc, bannerblk) {
        const atomEl = bannerblk.querySelector('.banner .tn-atom');
        if (!atomEl) return;

        const imgEl = atomEl.querySelector('.tn-atom__img');
        if (imgEl) {
            imgEl.src = imgsrc;
        } else {
            atomEl.style.backgroundImage = `url(${imgsrc})`;
        }

        if (atomEl.hasAttribute('data-img-zoom-url')) {
            atomEl.setAttribute('data-img-zoom-url', imgsrc);
        }
    }

    document.querySelectorAll('.banner').forEach(banner => {
        const rec = banner.closest('.t-rec');
        if (rec) {
            const firstMini = rec.querySelector('.miniature .tn-atom');
            if (firstMini) {
                firstMini.classList.add('currentminiature', 't-cover__arrow-wrapper_animated');
            }
        }
    });

    document.querySelectorAll('.miniature .tn-atom').forEach(atom => {
        atom.addEventListener('click', function () {
            const bannerblk = this.closest('.t-rec');
            if (!bannerblk) return;

            bannerblk.querySelectorAll('.miniature .tn-atom').forEach(el => {
                el.classList.remove('currentminiature', 't-cover__arrow-wrapper_animated');
            });

            this.classList.add('currentminiature', 't-cover__arrow-wrapper_animated');

            let imgsrc = '';
            const imgInAtom = this.querySelector('.tn-atom__img');

            if (imgInAtom) {
                imgsrc = imgInAtom.getAttribute('data-original') || imgInAtom.getAttribute('src');
            } else {
                imgsrc = this.getAttribute('data-original');
                if (!imgsrc) {
                    const bgStyle = window.getComputedStyle(this).backgroundImage;
                    if (bgStyle && bgStyle !== 'none') {
                        imgsrc = bgStyle.replace('url(', '').replace(')', '').replace(/"/g, '').replace(/'/g, '').trim();
                    }
                }
            }

            if (imgsrc) {
                pastepic(imgsrc, bannerblk);
            }
        });
    });
});
</script>
Made on
Tilda