Jquery Fancybox 3没有'；t调整移动设备上Facebook插件的大小

我设置了Fancybox，这样每个图像都可以在一个灯箱中打开，并带有独特的类似Facebook的/共享按钮。在Fancybox 2中，窗口的大小可以完全调整，以适应计算机和移动设备上的标题和按钮

但在新的Fancybox 3中（我添加它是为了启用刷卡），Fancybox在插件按钮下方添加了一个巨大的空白区域——但仅在移动设备上。我想不出如何移除这个空间——而且它足够大，看起来真的很尴尬。由于在移动设备上通过Fancybox 2查看Facebook按钮时效果良好，我猜这是Fancybox 3的一个问题

这是我为Fancybox 2编写的脚本。电脑和手机都可以观看：

$("#gallery-events a").fancybox({

beforeShow: function () {
if (this.title) {
    this.title += '<br />'; // Line break after title
    this.title += '<div class="fb-like-container"><div class="fb-like" data-href="' + this.href + '" data-layout="button_count" data-share="true"></div></div>';
    }
},
afterShow: function () {
    FB.XFBML.parse();
    $.fancybox.update(); // resize after show
},
helpers: {
    title: {
        type: 'inside'
    }
},
    loop: true 
});

$（“#画廊活动a”）.fancybox({
beforeShow:函数（）{
如果（本标题）{
this.title+='
'；//标题后换行
此.title+=''；
}
},
余辉：函数（）{
FB.XFBML.parse（）；
$.fancybox.update（）；//显示后调整大小
},
助手：{
标题：{
类型：“内部”
}
},
循环：正确
});

Fancybox 2演示：

对于Fancybox 3，脚本非常相似。根据这个网站上的建议，我只将“beforeShow”改为“afterLoad”，并将标题助手改为“caption”

$（“#画廊活动a”）.fancybox({
后加载：函数（）{
如果（本标题）{
this.title+='
'；//标题后换行
此.title+=''；
}
},
余辉：函数（）{
FB.XFBML.parse（）；
$.fancybox.update（）；//显示后调整大小
},
标题：{
类型：“内部”
},
循环：正确
});

Fancybox 3演示：

在传统浏览器上，两个灯箱看起来应该相同。只有在手机或iPad等移动设备上观看Fancybox 3灯箱时，按钮下方才会出现巨大的空白。当按钮plugin DIV被移除时，空白区域消失

由于#.fancybox.update（）脚本显然在传统浏览器（甚至在fancybox 3中）上正常工作，我猜问题在于fancybox 3脚本中针对移动浏览器的部分。或者更新代码不再适用于移动设备

我不知所措。不明白为什么Fancybox会仅仅因为插件而增加100px左右的垂直空间。我甚至删除了“类似fb的容器”样式（它增加了10px的上下边距，以将按钮从标题和边缘移开），但这不是罪魁祸首。有人有其他想法吗

埃塔：在看了几个小时的Fancybox脚本后，我可能终于找到了答案。我移动了#.fancybox.update（）；向上进入后加载：功能。虽然我的测试还为时过早，但手机上的盒子现在似乎可以正确调整大小

现在我想知道FB.XFBML.parse（）是否也需要在后加载中。Fancybox 3中的“beforeShow”和“afterShow”是旧代码吗？测试版已经发布了将近两年了——我希望有更多关于这个版本的文档。我在使用它时遇到了一些问题，但是滑动效果非常好。比我用Fancybox 2尝试的插件平滑得多

第二次编辑： 这里是我的位置：如果我添加一个样式，指定按钮插件（20px）的确切高度，并放置$.fancybox.update（）；进入后载功能后，它工作。所以，任何人在那里…如果这是你所需要的，那就行了

然而，我的目标一直是拥有一个like按钮和一个评论框。当然，您不能为注释框指定高度。如果移动$.fancybox.update（）；在后加载中，Fancybox不会调整灯箱区域的大小以适应注释框——它挂在边缘。如果你想让评论框适合这个区域，你需要将更新脚本移回“后演示”中——但是你会得到由“喜欢”按钮造成的巨大空白，这是最初的问题

我还在继续这方面的工作——我想我会向任何对我的进展感兴趣的人通报最新情况。主要的问题是，$.fancybox.update（）脚本不能处于后加载状态，除非动态内容（Facebook插件）专门设置了高度，否则它不会根据需要展开lightbox。欢迎任何人的想法

第三次编辑-仅当在移动设备上加载特定图像的灯箱时，才会显示额外的空白。如果将设备转向一侧（水平或垂直），灯箱将调整大小，空白将消失！将其返回到原始方向，空白区域仍将消失。然后转到下一张图片，空白区域又回来了

---

换句话说，只有在lightbox的图像首次加载（在手机上）时，才会出现巨大的空白。我假设Fancybox在移动设备转向时运行一个脚本，该脚本似乎可以解决问题。这是“更新”脚本吗？当图像第一次加载时，有没有办法让同样的事情发生？那会解决问题，但我不知道怎么做。我曾经尝试过添加“onUpdate”作为一个函数（在播放后），但它要么没有做任何事情，要么把整个脚本搞砸了。

像往常一样，修复方法看似简单，没有涉及更改任何Fancybox脚本

我的Fancybox 3脚本与上面显示的脚本保持一致。解析和更新仍在进行中

我所要做的就是在容器中添加一个高度，使其可以像Facebook一样容纳按钮。Like按钮已经在一个容器DIV中，该容器DIV启用了上下页边距（将按钮与标题和注释框隔开）。我只是给这个容器DIV添加了一个高度，突然，Fancybox在移动设备上加载Like按钮时想要添加的所有空白都消失了。瞧

这里是样式（我没有在上面发布任何CSS）。我将此样式添加到Fancybox CSS脚本中

.fb-like-container {
margin-top: 10px;
margin-bottom: 10px;
height: 20px;
}

如果你在手机和stil上看到我的Fancybox 3链接

.fb-like-container {
margin-top: 10px;
margin-bottom: 10px;
height: 20px;
}