Как сделать переключение блока 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);
}

.glhide {
    opacity: 0!important;
    min-height: 0!important;
    max-height: 0!important;
    pointer-events: none!important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

</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').addClass("glhide");
    
$('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').addClass("glhide");
    blockZeroGl.find('.before-after-zero').find('.t-rec:eq('+(glbtNum-1)+')').removeClass("glhide");

    blockZeroGl.find('div[class*="glzero_"]').removeClass('active-gl');
    $(this).addClass('active-gl');
    $('.t410').trigger('displayChanged');
    window.dispatchEvent(new Event('resize'));
};
});
$(window).resize(function() {clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){ $('.t410').trigger('displayChanged')}, 1000);});
    
});
</script>
Fresh stories from our blog
100 Books for your 2021 holidays!
Best books to relax with during holidays.
Top beauty trends of the year
Make a choice. Botox versus other skincare alternatives.
The best dance performances of 2020 year
New experimental classes of a new age.
Elliot Roberts in a new video from Zoie Records
In November ZRecords issued a new promo with social agenda.
Three places to get best burgers and mimosas
Pay attention to food, drinks, and… interior design!
How technology can enchance your sleep
Pillows and blankets that make you sleep like a baby.
Made on
Tilda