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 Webサイトで使用しています。ここでは、クリックするとfancyboxモーダルウィンドウをトリガーし、jQueryload関数を介してページの一部をロードする石積みのタイルにコンテンツがロードされます。FitVids を除いて、すべてがうまく機能します。多くの場合、タイル モーダル コンテンツには iframe ビデオの埋め込みが含まれており、タッチ/モバイル デバイスで連携する必要があります。

前もって感謝します。

4

1 に答える 1