Question

在fancybox中处理动态调整 iframe 的大小时，我意外地发现在data-width上设置了data-height和[data-fancybox]阅读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用法的解释（如果我错了请纠正我）。

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

有人可以解释一下吗？

Answer 1

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

请参阅文档 - 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>

您可以通过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都会以不同的宽度和高度启动。

动态设置fancybox 3 iframe大小

2 个答案: