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

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

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

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

100

#2470a1

Как сделать смену фото при клике в ZeroBlock в Tilda

Создали 5 иконок миниатюр и задали им ссылку #triggericon

Создали 5 полных фото, задали им ссылку #contpic и наложили друг на друга

Создали 5 текстовых блока, задали им ссылку #context и наложили друг на друга

Если нужна кнопка, то создаём ещё 5 Button и задаём им класс btn-trigger

Добавили код на страницу, в блок Другое - Т123

Mo-ti Level Up

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

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

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

Создаём смену контента по клику. Создаём разные элементы, меняем их компоновку, расположение и состав. Длительность видео 35 мин

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

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

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

<style>
.triggericon {
    transition:all 0.3s ease-in-out;
    cursor: pointer;
}
/*Стиль блокировки кнопки*/
.activetrigger{ 
    box-shadow: 0px 0px 0px 10px #91e3ff;
    
}
</style>
<script>
$( document ).ready(function() {
    $('a[href="#triggericon"]').addClass('triggericon').removeAttr('href');
    $('a[href="#contpic"]').closest('.t396__elem').addClass('contpic').hide();
    $('a[href="#contpic"]').removeAttr('href');
    $('a[href="#context"]').addClass('context').hide().removeAttr('href');;
    
    $('.triggericon').closest('.r').addClass('trigger-block');
    $('.btn-trigger').hide();
    
    $('.trigger-block').each(function(){
        let block = $(this);
        block.find('.triggericon:first').addClass('activetrigger');
        block.find('.contpic:first , .context:first , .btn-trigger:first ').show();
    });
       
       
    $('.triggericon').click(function(e) {e.preventDefault();
        if(!$(this).hasClass("activetrigger")) {
            let block = $(this).closest('.r');
            let trnum = block.find('.triggericon').index(this);
            block.find('.triggericon').removeClass('activetrigger');
            $(this).addClass('activetrigger');
            block.find('.contpic , .context , .btn-trigger ').hide(0);
            block.find('.contpic:eq('+trnum+'), .context:eq('+trnum+') , .btn-trigger:eq('+trnum+') ').show(0);
        };
    });
});
</script>