Инициализация плагина FitVids на модальном содержании Fancybox

Question

Я пытаюсь инициализировать плагин FitVids на Fancybox модальном содержимом после загрузки этого содержимого. Он отлично работает, если я использую обратный вызов onUpdate, когда пользователь изменяет размер окна просмотра, но если я попытаюсь заставить его работать с afterShow, чтобы применить его после отображения содержимого, я ничего не получаю. Я проверил, чтобы afterShow работал, бросая в console.log('whatever'), и это было успешно.

Это код, я использую:

$('.tile-link.fancybox').click(function() { 
    var url = $(this).data('url'); 
    var getContent = $('.tile-lightbox-content').load(url + ' #lightboxBucketContent'); 
    $('.tile-lightbox-content').empty(); 

    $.fancybox({ 
     content: getContent, 
     width: '90%', 
     height: '90%', 
     type: 'html', 
     scrolling: 'no', 
     modal: false, 
     padding: 20, 
     enableEscapeButton: true, 
     titleShow: true, 
     autoSize: false, 
     autoResize: true, 
     autoDimensions: false, 
     aspectRatio: true, 
     helpers: { 
      media: true 
     }, 
     // afterShow doesn't work 
     afterShow: function() { 
      $('.fancybox-inner').fitVids({ 
       customSelector: 'iframe[src^="http://somewebsite.com"]' 
      }); 
     }, 
     // onUpdate works correctly 
     onUpdate: function() { 
      $('.fancybox-inner').fitVids({ 
       customSelector: 'iframe[src^="http://somewebsite.com"]' 
      }); 
     } 
    }); 
}); 

Я использую это на WordPress сайте, где содержание загружается в некоторых каменных плиток, которые запускают модальное окно FancyBox при нажатии и загружаете части страницы через функцию jQuery load. Все работает денди, за исключением FitVids. Модальное содержание плитки часто содержит встроенные видеоролики iframe, и мне нужно, чтобы они сотрудничали на сенсорных/мобильных устройствах.

Заранее спасибо.

Answer 1

После мастерить с этим на некоторое время, пытаясь выяснить, почему afterShow не работал, но onUpdate сделал, JFK был в состоянии указать меня в правильном направлении, и выбранный ответ this SO post заставил меня квадрат прочь.

Вот код, который работает для меня:

$('.tile-link.fancybox').click(function() { 
    var url = $(this).data('url'); 
    var getContent = $('.tile-lightbox-content').load(url + ' .lightboxBucketContent', function() { 
     $('.lightboxBucketContent').find('.lightbox-video-wrap').each(function(i) { 
      $(this).fitVids({ 
       customSelector: 'iframe[src^="https://somewebsite.com"], iframe[src^="http://somewebsite.com"]' 
      }); 
     }); 
    }); 
    $('.tile-lightbox-content').empty(); 

    $.fancybox({ 
     width: '90%', 
     height: '90%', 
     content: getContent, 
     type: 'html', 
     scrolling: 'no', 
     modal: false, 
     padding: 20, 
     enableEscapeButton: true, 
     titleShow: true, 
     autoScale: true, 
     autoSize: false, 
     autoResize: true, 
     autoDimensions: false, 
     aspectRatio: true, 
     helpers: { 
      media: true 
     }, 
     onUpdate: function() { 
      $('.fancybox-inner').each(function(i) { 
       $(this).fitVids({ 
        customSelector: 'iframe[src^="https://somewebsite.com"], iframe[src^="http://somewebsite.com"]' 
       }); 
      }); 
     } 
    }); 
}); 

Вместо того, чтобы пытаться связать функцию самого FancyBox сценария, JFK предложил привязать к функции load() вместо этого. После некоторого ворчания, это сделало трюк. Так что теперь он будет:

1. Загрузить фрагмент содержимого из URL, указанный в параметре моего a элемента (<a data-url="http://somewebsiteurl.com">...)
2. data-url Найти контейнер внутри загруженного содержимого, что я хочу, чтобы применить FitVids к
3. Применить FitVids к каждому из повторения контейнера, содержащего iframe встраивания

Я также дублируюсь той же функция в onUpdate обратного вызова FancyBox так, что если пользователь изменяет размер своего браузера и нажимает на фрагмент, который запускает модальный, он будет следить за тем, чтобы FitVids применялся после изменения вида просмотра. Я не думаю, что эта часть имеет решающее значение, но она есть.

Это единственное, что сработало для меня до этого момента, поэтому я очень взволнован. JFK, я должен вам пиво (или то, что вы предпочитаете).