将fancybox 1迁移到fancybox 3。

Question

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

下面是一个典型的例子

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'
     });

这是在一个document ready call里面的，在fancybox 1上运行得很好，但是现在我链接了fancybox 3，iframe是完整的fancybox大小，但是链接的src文件看起来是完整的，但是只有100px（左右）高，正常宽度。

我到底缺了什么？

Answer 1

你使用的是v3中不存在的选项，如果你想设置自定义尺寸，可以使用CSS或JS（如 iframe : {css : {width : '90%'}})，见docs https:/fancyapps.comfancybox3docs#iframe 的样本。

总之，由于你没有提供一个可以检查你的设置的live pagedemo的链接，所以不可能给出一个确切的答案。

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的格式。

如果我之前的问题没有说清楚，我很抱歉。