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

Пример состоит из 5 ти блоков GL11
2 и 4 блок создан по 2-е фотографии
В настройках 2,4 блока отключена анимация при наведении и увеличение по клику
Размытие и прозрачность задана в Photoshop

1 блок - 6 фото
2 блок - 2 фото (промо)
3 блок - 6 фото
4 блок - 2 фото (промо)
5 блок - 6 фото

Скрипт и стили вставляются в блок ДРУГОЕ►Т123
<script>
    //Добавляем надпись на размытое фото
    $('#rec42224488 .t552__blockimg:eq(2) , #rec42224608 .t552__blockimg:eq(2)').append('<div class="moretext">Показать ещё модели ►►►</div>');
    
    
    //Клик по первому размытому блоку
    $('#rec42224488').click(function() {
        
    //Считываем высоту фото и присваиваем её для всех блоков
    var visota = $(".t552__blockimg").css("height");    
    $('.t552__blockimg').css("height", visota);
    
    //Скрываем первый размытый блок 
    $('#rec42224488').slideUp(500);
    //Показываем нижний блок + 1 размытый
    $('#rec42224495 , #rec42224608').slideDown(1000);
	
	
});
     //Клик по второму размытому блоку
    $('#rec42224608').click(function() {
    

     //Скрываем первый размытый блок 
     $('#rec42224608').slideUp(500);
      //Показываем нижний блок + 1 размытый
     $('#rec42224782').slideDown(1000);
	
	
});



</script>


<style>

/*Скрываем лишние блоки на старте*/
 #rec42224495, #rec42224608 , #rec42224782  { display: none; }
/*Задаём прозрачность и размытие для нужных блоков блоков*/ 
 #rec42224488 , #rec42224608 {
     cursor: pointer;
   
   /*  opacity: 0.3;
     -webkit-filter: blur(5px); 
     filter: blur(5px); */
 
 }
   /*Стили для текста на фото*/
 .moretext {
    color: #ffffff;
    font-family: Roboto;
    font-size: 20px;
    text-align: center;
    padding-top: 25%;
}
 
 /*Стили для текста на малых экранах*/
 @media screen and (max-width: 960px) { 
 .moretext { 
    font-size: 16px;
    padding-top: 20%;
}}

</style>
Error get alias
Error get alias
Error get alias

© All Right Reserved.
MF GERMANY
Made on
Tilda