Как сделать переключение блока GL09 (до/после) в ZeroBlock в Tilda
Мы знаем как сделать
вашу кожу красивой
Не выходя из дома и в удобное для вас время. Сделай здоровую кожу своей привычкой!
Записаться на курс
"Поможем каждому сделать
здоровую кожу привычкой"

Как сделать переключение блока GL09 (до/после) в ZeroBlock в Tilda

1
Создали ZeroBlock
2
Добавили в него элемент HTML с классом before-after-zero
Размеры элемента из примера для 5 экранов
460х400 - 380х330 - 600х487 - 100%х382 - 100%х245
3
Создали 3 иконки управления Image и задали им класс (для каждой свой)
glzero_1 glzero_2 glzero_3
4
Создали 3 блока GL09 - ширина 5 колонок, без отступа сверху и снизу
5
Вставили код на страницу в блок Т123
В коде прописали ID наших GL09
//Прописываем наши ID
let gl09ID = ['#rec289281234','#rec289280748','#rec289279716'];
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Помещаем в ZeroBlock блок GL09 до/после и создаём их переключение через кнопки.
Длительность видео 31 минута
Фрагмент видео
Библиотека для примера
<style>
.t410__col {margin: 0;}
div[class*="glzero_"]{
    cursor:pointer;
    border-radius: 50%;
    transition:all 0.2s linear;
    filter: grayscale(1);
} 
div.active-gl{
    box-shadow: 0 0 7px 0px #616161; 
    transform: rotateY(180deg);
    filter: grayscale(0);
}
div[class*="glzero_"]:not(.active-gl):hover {
    transform: scale(0.9);
}
</style>

<script>
$(document).ready(function(){
    
//Прописываем наши ID  
let gl09ID = ['#rec289281234','#rec289280748','#rec289279716'];

$.each(gl09ID,function(index,value){
 $(value).appendTo('.before-after-zero .tn-atom');
});
$('.glzero_1').addClass('active-gl');
$('.before-after-zero').find('.t-rec').not(':first').hide();
    
$('div[class*="glzero_"]').click(function(){
if (!$(this).hasClass('active-gl') ){
    
    let blockZeroGl = $(this).closest('.t-rec');
    let glBtn = blockZeroGl.find('div[class*="glzero_"]').length;
    let className = $(this).attr('class');
    let glbtNum;
    for (let i=1; i<glBtn+1;i++){
    let contain = className.includes('glzero_'+i);
    if (contain) glbtNum=i;
    };
   
    blockZeroGl.find('.before-after-zero').find('.t-rec').hide();
    blockZeroGl.find('.before-after-zero').find('.t-rec:eq('+(glbtNum-1)+')').show();

    blockZeroGl.find('div[class*="glzero_"]').removeClass('active-gl');
    $(this).addClass('active-gl');
    $('.t410').trigger('displayChanged');
};
});
$(window).resize(function() {clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){ $('.t410').trigger('displayChanged')}, 1000);});
    
});
</script>
Made on
Tilda