动态设置 fancybox 3 iframe 大小

Question

在处理fancybox中动态调整iframe的大小时，我偶然发现在阅读@987654321后在[data-fancybox]上设置data-width和data-height很有帮助@。

示例 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 用法的解释（如果我错了，请纠正我）。

注意：上面这两个代码 sn-ps 对我有用，但它们必须一起工作，如果其中一个被取消，它将无法工作。

谁能帮我解释一下？

Answer 1

基于fancybox 3 documentation，它们确实提供了一种通过创建data-options 属性来设置我们自己的自定义选项的方法。这是文档中的示例：

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

您可以从onComplete 等回调函数中通过console.info( slide.opts ) 看到这些选项的值（slide 是回调函数中的一个参数）。

不出意外，这两个sn-ps是一样的：

<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 中，我使用 slide.opts.width 从 data-width 和 slide.opts.height 获取值以从 data-height 获取高度，这就是我的宽度和高度值从后端传递到前端的方式。

由于这两个值是在afterLoad回调中处理的，所以每个iframe都会以不同的宽度和高度初始化。

Answer 2

属性 - data-width 和 data-height - 用于告诉脚本图像的实际尺寸。然后脚本可以计算位置并开始缩放缩略图，而实际图像仍在加载。

查看文档 - http://fancyapps.com/fancybox/3/docs/#images

这些属性不会在其他任何地方使用。

您可以使用{ iframe : { css : { width: '', height : '' } } } 设置 iframe 元素的宽度/高度，但没有更改 iframe 内容的选项。