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

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

Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на 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:first').addClass('activetrigger');
       $('.btn-trigger').hide();
       $('.contpic:first , .context:first , .btn-trigger:first ').show();
       $('.triggericon').click(function(e) {e.preventDefault();
       if(!$(this).hasClass("activetrigger")) {
       let trnum = $('.triggericon').index(this);
       $('.triggericon').removeClass('activetrigger');
       $(this).addClass('activetrigger');
       $('.contpic , .context , .btn-trigger ').hide(0);
       $('.contpic:eq('+trnum+'), .context:eq('+trnum+') , .btn-trigger:eq('+trnum+') ').show(0);
       }; });});
</script>