将fancybox %1迁移到fancybox %3

Question

我有一个相当庞大的网站(对我来说)是用fancybox 1开发的，我正试图升级到Fancybox 3，但有一些问题。我所有的iframe内容都有大约100px的高度。我花了大约一周的时间试图找到答案，需要把这个问题抛给专家。

下面是一个典型的例子

HTML代码

<a href="syllabus/s04.1.htm" class="syl"><span class="def3" onMouseOver="this.className='def3_on'" onMouseOut="this.className='def3'">Syllabus 
      ref: 4.1</span></a>

"syl“类在外部jquery javascript中被引用：

 $(".syl").fancybox({
        'width'         : '90%',
        'height'        : '90%',
        'autoScale'         : false,
        'overlayOpacity'    :  0.6,
        'overlayColor'      : '#944',
        'transitionIn'      : 'fade',
        'transitionOut'     : 'fade',
        'type'      : 'iframe'
     });

这是在一个文档就绪的调用中，在fancybox 1中工作得很好，但是现在我已经链接了fancybox 3，iframe是完整的fancybox大小，但是链接的src文件看起来是完整的，但只有100px (大约)高，正常宽度。

我遗漏了什么？

Answer 1

您正在使用v3中不存在的选项。如果您希望设置自定义维度，可以使用CSS或JS (如iframe : {css : {width : '90%'}})，请参阅文档https://fancyapps.com/fancybox/3/docs/#iframe中的示例。

无论如何，由于您没有提供可以检查您的设置的实时页面/演示的链接，因此不可能给出确切的答案。

Answer 2

好的，我通过查看一些示例的源代码找到了它。

在HTML中，您必须使用标识符声明data-fancybox标记。在下面的示例中，data-fancybox='swf‘

<a href="#" data-src="Section00-bonding/swf/sigmapi.swf" class="swf" data-fancybox='swf' data-type="iframe">File Name</a>

然后在外部.js文件中：

$("[data-fancybox='swf']").fancybox({
    iframe : {
        css : {
            width :  '70%',
            height : '90%'
        }
    }
});

这意味着我现在可以根据显示的文件类型来决定fancybox的格式。

如果我之前没有弄清楚这个问题，我很抱歉。