1

加载内容后，我正在尝试在Fancybox模态内容上初始化FitVids插件。如果我在用户调整视口大小时使用回调，它可以完美地工作，但是如果我尝试让它在显示内容后应用它，我什么也得不到。我已经进行了测试，以确保通过投入来确保效果，并且是成功的。onUpdateafterShowafterShowconsole.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 网站上使用它，其中内容被加载到一些砖石瓦片中，当点击并通过 jQueryload函数加载页面的一部分时，这些瓦片会触发一个花式框模式窗口。除了 FitVids 之外，一切都很好用。平铺模态内容通常包含 iframe 视频嵌入，我需要它们在触摸/移动设备上配合。

提前致谢。

4

1 回答 1

2

在修补了一段时间试图弄清楚为什么afterShow不起作用但onUpdate确实起作用之后，JFK 能够为我指出正确的方向，并且对这个 SO 帖子的选定答案让我感到满意。

这是对我有用的代码：

$('.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 建议将其与函数绑定，而不是尝试将函数绑定到 Fancybox 脚本本身load()。经过一番摆弄，就成功了。所以现在它会：

  1. data-url从my aelement ( <a data-url="http://somewebsiteurl.com">...)的参数中指定的 URL 加载内容片段
  2. 在加载的内容中找到要应用 FitVids 的容器
  3. 将 FitVids 应用于包含iframe嵌入的容器的每个迭代

我还将相同的函数复制到onUpdateFancybox 的回调中，这样如果用户调整浏览器大小并单击触发模式的图块，它将确保在该视口更改后应用 FitVids。我认为这部分并不重要，但它就在那里。

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

于 2013-07-02T20:05:04.523 回答