0

在处理fancybox中动态调整iframe的大小时，我无意中发现设置data-width和data-height在阅读此答案[data-fancybox]后很有帮助。

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

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

任何人都可以为我解释一下吗？

4

2 回答 2

0

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

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

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

毫不奇怪，这两个片段是相同的：

<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 都会以不同的宽度和高度初始化。

于 2017-05-17T10:21:19.603 回答
0

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

请参阅文档 - http://fancyapps.com/fancybox/3/docs/#images

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

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

于 2017-05-17T07:26:54.867 回答