Question

我正在尝试在加载内容后初始化FitVids模态内容上的Fancybox插件。如果我在用户调整视口大小时使用onUpdate回调，它的效果非常好，但是如果我尝试使用afterShow使用它来在显示内容后应用它，我什么也得不到。我已经过测试，确保afterShow投放console.log('whatever')并且成功。{/ p>

这是我正在使用的代码：

$('.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网站上使用它，其中内容被加载到一些砖石瓦片中，当点击时触发花式框模式窗口并通过jQuery load功能加载页面的一部分。除FitVids外，一切都很有效。平铺模式内容通常包含iframe视频嵌入，我需要它们在触摸/移动设备上进行协作。

提前致谢。

Answer 1

在试图找出afterShow为什么onUpdate无效但$('.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"]' }); }); } }); });做了一段时间之后修补了这一点，JFK能够指出我正确的方向和{{3的选定答案让我摆平了。

以下是适用于我的代码：

load()

而不是试图将函数绑定到Fancybox脚本本身，JFK建议将它绑定到data-url函数。经过一番摆弄，这就成了伎俩。所以现在它会：

从我a元素的<a data-url="http://somewebsiteurl.com">...参数（iframe）中指定的网址加载内容片段
在加载的内容中找到我要将FitVids应用于
将FitVids应用于包含onUpdate嵌入

我还将相同的功能复制到Fancybox的{{1}}回调中，这样如果用户调整浏览器大小并点击触发模式的图块，它将确保在视口更改后应用FitVids。我不认为这部分是至关重要的，但它就在那里。

到目前为止，这是唯一对我有用的东西，所以我非常兴奋。 JFK，我欠你一杯啤酒（或者你喜欢的任何东西）。

在Fancybox模式内容上初始化FitVids插件

1 个答案: