Как сделать выпадающую галерею из блоков GL11 для Tilda

Пример состоит из 3-х блоков GL11
Размытие и прозрачность заданы в CSS

1 блок - 9 фото
2 блок - 6 фото
3 блок - 3 фото

Скрипт и стили вставляются в блок ДРУГОЕ►Т123

<script>
   //Присваиваем переменной класс наших фото
   var imgkls = '.t552__blockimg';
   //Присваиваем переменным ID наших блоков и считаем кол-во фото
   //Первый блок
   var phblk_1 = '#rec42354133'; var dl_1 = $(phblk_1+' '+imgkls).length -1 ;
   //Второй блок
   var phblk_2 = '#rec42354135'; var dl_2 = $(phblk_2+' '+imgkls).length -1 ;
   //Третий блок
   var phblk_3 = '#rec42354137'; var dl_3 = $(phblk_3+' '+imgkls).length -1 ;
   
   //Скрываем лишние блоки на старте
   $(phblk_2).css('display' , 'none')
   $(phblk_3).css('display' , 'none')
   
   //Добавляем надпись и дополнительный класс для курсора на последнее фото нужных блоков
   $(phblk_1+' '+imgkls+':eq('+dl_1+')').addClass("blurstyle").before('<div class="blurblk"><img src="https://static.tildacdn.com/tild3431-6535-4838-b666-626565633966/refreshpagearrowbutt.svg" data-original="https://static.tildacdn.com/tild3431-6535-4838-b666-626565633966/refreshpagearrowbutt.svg" class="loadicon" imgfield="img"></div>');
   $(phblk_2+' '+imgkls+':eq('+dl_2+')').addClass("blurstyle").before('<div class="blurblk"><img src="https://static.tildacdn.com/tild3431-6535-4838-b666-626565633966/refreshpagearrowbutt.svg" data-original="https://static.tildacdn.com/tild3431-6535-4838-b666-626565633966/refreshpagearrowbutt.svg" class="loadicon" imgfield="img"></div>');
  
  
  //Загружаем оригинальные фото
   $(".t552__blockimg").addClass("loaded");
   var y = $("div.t552__blockimg").length;
   var x =0;
   while (x <= y) {
  $(".t552__blockimg:eq("+x+")").css('backgroundImage', 'url('+$(".t552__blockimg:eq("+x+")").data("original")+')');
  x++;
}
 
  
  
   //Считываем высоту фото и присваиваем её для всех блоков
    function visota(){ 
    var hg = $(imgkls).css("height");    
    var wd = $(imgkls).css("width"); 
    $(imgkls).css("height", hg);
    $(".blurblk").css("height", hg);
    $(".blurblk").css("width", wd);
    
   };
   
//Проверяем размер фото через 1 с после запуска
setTimeout(function() {
visota();
}, 1000);
//Проверяем размер фото при скролле
$(window).scroll(function() { 
        var top = $(document).scrollTop();
        //Если перемещение больше 5 px
        if (top >= 5) { visota()}
    });
//Проверяем размер фото при изменении размера браузера
   $(window).resize(function(){
   visota();
});
  
  
  
    //Клик по первому размытому блоку
    $('.loadicon:eq(0)').click(function() {
    //Рассчитываем высоту
    visota();
    //Удаляем иконку с последнего фото первого блока
    $("div.blurblk:eq(0)").remove();
     //Удаляем эффект блика
     $("div.ink:eq(0)").remove();
    
    //Удаляем эффект размытия с последнего фото первого блок
    $(phblk_1+' '+imgkls+':eq('+dl_1+')').removeClass("blurstyle")
    //Показываем нижний блок
    $(phblk_2).slideDown(1000);
    
    
});

    //Клик по второму размытому блоку
    $('.loadicon:eq(1)').click(function() {
    //Рассчитываем высоту
    visota();
    //Удаляем иконку с последнего фото второго блока
    $("div.blurblk").remove();
    //Удаляем эффект блика
     $("div.ink").remove();
    
    //Удаляем эффект размытия с последнего фото первого блок
    $(phblk_2+' '+imgkls+':eq('+dl_2+')').removeClass("blurstyle")
    //Показываем нижний блок
    $(phblk_3).slideDown(1000);
});


</script>


<style>

/*Задаём прозрачность и размытие для нужных блоков блоков*/ 
 .blurstyle {
     opacity: 0.7;
    -webkit-filter: blur(5px);
    filter: blur(5px);
 
 }

/*Стили для размытия фото*/
.blurblk {
    cursor: pointer;
    position: absolute;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*Стили для иконки со стрелочками*/
.loadicon{
    width: auto;
    max-height: 50%;
    display: block;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition: transform 1s ease-in-out;
    
}
/*Эффект при наведении*/
.loadicon:hover {
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
}


</style>

© All Right Reserved.
MF GERMANY
Made on
Tilda