コンテンツが読み込まれたら、 Fancyboxモーダル コンテンツでFitVidsプラグインを初期化しようとしています。ユーザーがビューポートのサイズを変更するときにコールバックを使用すると完全に機能しますが、コンテンツが表示されたらそれを適用するように動作させようとすると、何も得られません。スローして動作することを確認するためにテストしましたが、成功しました。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 Webサイトで使用しています。ここでは、クリックするとfancyboxモーダルウィンドウをトリガーし、jQueryload
関数を介してページの一部をロードする石積みのタイルにコンテンツがロードされます。FitVids を除いて、すべてがうまく機能します。多くの場合、タイル モーダル コンテンツには iframe ビデオの埋め込みが含まれており、タッチ/モバイル デバイスで連携する必要があります。
前もって感謝します。