CREATIVE AGENCY - PROFESSIONAL VIDEOGRAPHERS - VIDEOSHOOT ABROAD

МЫ СОЗДАЁМ
УНИКАЛЬНЫЙ
ВИДЕОКОНТЕНТ

Мы сплоченная команда, нацеленная быть лучшей в сфере
свадебного и коммерческого видеопроизводства.
Работы
Left
Right

Как создать галерею из видео, используя связку блоков TE110 и GL08N для Tilda

Создадим галерею из видео, которая будет открываться в popUP окне при клике на фото в блоке TE110. Также необходимо, чтобы при клике на фото открывалось видео, которое ему соответствует. И не забудем учесть остановку видео при пролистывании галереи.

Порядок действий:
1. Создаём блок TE110
2. Создаём галерею GL08N
3. Проставляем ссылки галереи #popup:videogallery в блок TE110
3. Заполняем всё фото и видео.

Пример выполнен для 6 фотографий и 6 видео-роликов

Стиль вставляется в блок Другое►Т123
<style>
/*Курсор при наведении на плитки*/
    .t694__col{
        cursor:pointer;
    }
</style>

<script>

    $(document).ready(function(){
        
    //Очищаем содержимое слайдов с фото
    $(".t746 .t-slds__bgimg").empty();
    //Вставляем видео в каждый слайд
    $(".t746 .t-slds__bgimg:eq(0)").append('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/MMBY0YOA6Hs?enablejsapi=1&?rel=0&amp;fmt=18&amp;html5=1&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
    $(".t746 .t-slds__bgimg:eq(1)").append('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/S8rF5hN8Lvk?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
    $(".t746 .t-slds__bgimg:eq(2)").append('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/xyT0oFdvut8?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
    $(".t746 .t-slds__bgimg:eq(3)").append('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/yN8E6I3BtkM?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
    $(".t746 .t-slds__bgimg:eq(4)").append('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/9PrfSFSrYLo?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
    $(".t746 .t-slds__bgimg:eq(5)").append('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/edfHF1pJUfk?enablejsapi=1&?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>');
    //Добавляем всем видео в галерее класс полной загрузки
    $(".t746 .t-slds__item").addClass("t-slds__item-loaded");
    
    //При нажатии на плитку №1 открываем видео №1
     $('.t694__col:eq(0)').click(function(){
     $('.t746 .t-slds__items-wrapper').attr('data-slider-pos', '1'); 
     $(".t746 .t-slds__item").removeClass("t-slds__item_active");
     $(".t746 .t-slds__item:eq(1)").addClass("t-slds__item_active");
     
});
    //При нажатии на плитку №2 открываем видео №2
    $('.t694__col:eq(1)').click(function(){
     $('.t746 .t-slds__items-wrapper').attr('data-slider-pos', '2'); 
     $(".t746 .t-slds__item").removeClass("t-slds__item_active");
     $(".t746 .t-slds__item:eq(2)").addClass("t-slds__item_active");
     
});
    //При нажатии на плитку №3 открываем видео №3
    $('.t694__col:eq(2)').click(function(){
     $('.t746 .t-slds__items-wrapper').attr('data-slider-pos', '3'); 
     $(".t746 .t-slds__item").removeClass("t-slds__item_active");
     $(".t746 .t-slds__item:eq(3)").addClass("t-slds__item_active");
    
});
    //При нажатии на плитку №4 открываем видео №4
    $('.t694__col:eq(3)').click(function(){
     $('.t746 .t-slds__items-wrapper').attr('data-slider-pos', '4'); 
     $(".t746 .t-slds__item").removeClass("t-slds__item_active");
     $(".t746 .t-slds__item:eq(4)").addClass("t-slds__item_active");
   
});
    //При нажатии на плитку №5 открываем видео №5
    $('.t694__col:eq(4)').click(function(){
     $('.t746 .t-slds__items-wrapper').attr('data-slider-pos', '5'); 
     $(".t746 .t-slds__item").removeClass("t-slds__item_active");
     $(".t746 .t-slds__item:eq(5)").addClass("t-slds__item_active");
     
});
    //При нажатии на плитку №6 открываем видео №6
    $('.t694__col:eq(5)').click(function(){
     $('.t746 .t-slds__items-wrapper').attr('data-slider-pos', '6'); 
     $(".t746 .t-slds__item").removeClass("t-slds__item_active");
     $(".t746 .t-slds__item:eq(6)").addClass("t-slds__item_active");
     
});

});
    //При пролистывании или закрытии галереи останавливаем видео
    $(document).on('click', '.t-popup', function() {
      $("iframe").each(function() { $(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*') });
    
});
  </script>
Made on
Tilda