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

1

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

2

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

3

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

4*

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

5

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

Mo-ti Level Up

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

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

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

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

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

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

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


<style>
.triggericon {
    transition:all 0.3s ease-in-out;
}
/*Стиль блокировки кнопки*/
.activetrigger{ 
    box-shadow: 0px 0px 0px 10px #91e3ff;
    
}
</style>
<script>
   $( document ).ready(function() {
      $('a[href="#triggericon"]').addClass('triggericon');
      $('a[href="#contpic"]').closest('.t396__elem').addClass('contpic').hide();
      $('a[href="#context"]').addClass('context').hide();
       $('.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>