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

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

1
Создали 5 иконок миниатюр и задали им ссылку #triggericon
2
Создали 5 полных фото, задали им ссылку #contpic и наложили друг на друга
3
Создали 5 текстовых блока, задали им ссылку #context и наложили друг на друга
4
Добавили код на страницу, в блок Другое - Т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"]').addClass('contpic').hide();
      $('a[href="#context"]').addClass('context').hide();
       $('.triggericon:first').addClass('activetrigger');
       $('.contpic:first , .context: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').hide(500);$('.contpic:eq('+trnum+'), .context:eq('+trnum+')').show(500);
       }; });});
</script>   
       
Made on
Tilda