動的に設定fancybox 3 iframeのサイズ

Question

fancyboxにはiframeサイジング動的とを扱うとき、私は誤って[data-fancybox]にdata-widthとdata-heightを設定するthis answerを読んだ後に有用であることがわかりました。

Exmaple HTML要素：

<a data-fancybox data-width="<?= $banner_width; ?>" data-height="<?= $banner_height; ?>" data-src="example.com" href="javascript:;">example.com</a> 

とJS：

$("[data-fancybox]").fancybox({ 
    afterLoad: function (instance, slide) { 
     $('body').find('.fancybox-content').css({"width": slide.opts.width + "px", "height": slide.opts.height + "px"}); 
    } 
}); 

私は何を見つけ出すことができなかったことfancyboxドキュメントからHTML要素にdata-widthとdata-height使い方の何の説明が（存在しないことです私が間違っている場合は私を修正してください）。

注：上記の2つのコードスニペットは私のために機能しますが、一緒に作業する必要があります。その1つが離されても機能しません。

は、誰も私のためにその少しをしてください説明できますか？

Answer 1

プロパティ - data-widthおよび- は、スクリプトに実際の画像の寸法を伝えるために使用されます。その後、スクリプトは位置を計算し、実際の画像がまだ読み込まれている間にサムネイルのズームを開始することができます。

は、マニュアルを参照してください - http://fancyapps.com/fancybox/3/docs/#images

これらのプロパティはどこにも使用されていません。

{ iframe : { css : { width: '', height : '' } } }を使用してiframe要素の幅と高さを設定できますが、iframeコンテンツを変更するオプションはありません。

Answer 2

fancybox 3 documentationに基づいて、data-options属性を作成して独自のカスタムオプションを設定する方法を提供します。ここではドキュメントからの例です：

<a data-fancybox 
    data-options='{"caption" : "My caption", "src : "iframe.html"}' href="javascript:;"> 
    Open external page using iframe 
</a> 

あなたは（slideは、コールバック関数の中で一つの引数である）onCompleteのようなコールバック関数からconsole.info(slide.opts)により、これらのオプションの値を見ることができます。

は意外にも、これらの二つのスニペットが同じわけではありません：

<a data-fancybox data-width="<?= $banner_width; ?>" data-height="<?= $banner_height; ?>" data-src="example.com" href="javascript:;">example.com</a> 

<a data-fancybox data-options='{"width" : "<?= $banner_width; ?>", "height" : data-height="<?= $banner_height; ?>", "src" : "example.com" }' href="javascript:;">example.com</a> 

だから、私のjavascriptので、私はdata-heightからの高さを得るためにdata-widthとslide.opts.heightから値を取得するためにslide.opts.widthを使用し、それがどのように私の幅であります高さの値はバックエンドからフロントエンドに渡されます。

これらの2つの値はafterLoadコールバックで処理されるため、すべてのiframeは異なる幅と高さで開始されます。