Сейчас узнаем, какой подарок выпадет именно Вам

Крутите колесо

Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом

100

#2470a1

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

Создали Zero

Добавили в него 6 Image для миниатюр с классом miniature

Добавили 1 большой Image c классом banner
Загрузили в него картинку как и в первой миниатюре

Добавили код в блок Другое - Т123

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём миниатюрки и один общий баннер.
Выводим картинки из миниатюр в баннер, добавляем эффекты выделения. Длительность видео: 19 мин

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера

<style>
.miniature .tn-atom{
    cursor:pointer;
    transition: all 0.2s ease-in-out;    
}
.currentminiature{
    transform: scale(1.1);
    filter: drop-shadow(4px 4px 0px #fff); 
    
} 
.banner .tn-atom{
    filter: drop-shadow(7px 7px 0px #fff);    
}
</style>

<script>
$(document).ready(function() {
function pastepic(imgsrc,bannerblk){
     if( bannerblk.find('.banner .tn-atom').find('.tn-atom__img').length > 0) {
           bannerblk.find('.banner .tn-atom').find('.tn-atom__img').attr('src', imgsrc);
         }else{  bannerblk.find('.banner  .tn-atom').css('background-image', 'url('+imgsrc+')');
     };
};  
$('.banner').closest('.t-rec').each(function() {
    $(this).find('.miniature:first .tn-atom').addClass('currentminiature t-cover__arrow-wrapper_animated');  
});
$('.miniature .tn-atom').click(function() {
    let bannerblk = $(this).closest('.t-rec');
    bannerblk.find('.miniature .tn-atom').removeClass('currentminiature t-cover__arrow-wrapper_animated');
    let actelem = $(this);let imgsrc='';
    actelem.addClass('currentminiature t-cover__arrow-wrapper_animated');
    if(actelem.find('.tn-atom__img').length > 0) {
        if (actelem.find('.tn-atom__img').attr("data-original")) {
        imgsrc = actelem.find('img').attr('data-original');
        }else{ imgsrc = actelem.find('img').attr('src');    
        }pastepic(imgsrc,bannerblk);
    }else{
        if (actelem.attr("data-original")) {
        imgsrc = actelem.attr('data-original');
        }else{imgsrc = (actelem.css('background-image')).replace('url(','').replace(')','').replace(/\"/gi, "");    
        }pastepic(imgsrc,bannerblk);
    };
});
});
</script>