fancyapps 的 Fancybox3 | iFrame 调整大小

Question

我正在尝试使用 facnybox3 制作 3 个 iframe，但我不知道如何制作 3 个具有自己定义大小的 iframe。有什么想法吗？

我的代码：http://fancyapps.com/fancybox/3/docs/#iframe

HTML:

<a data-fancybox data-type="iframe" data-src="http://codepen.io/fancyapps/full/jyEGGG/" href="javascript:;">
    Webpage
</a>

CSS:

.fancybox-slide--iframe .fancybox-content {
    width  : 800px;
    height : 600px;
    max-width  : 80%;
    max-height : 80%;
    margin: 0;
}

Answer 1

您可以使用 data-options 属性来设置自定义选项，请参阅此处的第二个示例 - https://codepen.io/fancyapps/pen/qoKGRW?editors=1000

<a href="https://blog.codepen.io/" data-fancybox data-options='{ "type" : "iframe", "iframe" : { "preload" : false, "css" : { "width" : "600px" } } }'>
    Custom options
</a>

fancyapps 的 Fancybox3 | iFrame 调整大小

Fancybox3 by fancyapps | iFrame resize

html

css

size

iframe

fancybox