问Fancybox 3不调整移动设备上的Facebook插件的大小

EN

我设置了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 
});

Fancybox 2演示：http://www.lycochoir.com/swipe-3/photos.html

对于Fancybox 3，脚本非常类似。按照这个站点上的建议，我只将"beforeShow“更改为"afterLoad”，并将标题助手更改为“标题”。

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

afterLoad: 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" mobile="false"></div></div>';
    }
},
afterShow: function () {
    FB.XFBML.parse();
    $.fancybox.update(); // resize after show
},
    caption: {
        type : 'inside'
    },
    loop: true 
});

Fancybox 3演示：http://www.lycochoir.com/photos/annual-events.html

在传统浏览器上，这两个灯箱看起来应该是一样的。只有在移动设备(如手机或iPad )上查看Fancybox 3灯盒时，按钮下面的大量空白才会出现。当按钮插件DIV被移除时，空格就消失了。

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

我不知所措。无法理解为什么Fancybox仅仅因为插件就会增加100 to左右的垂直空间。我甚至删除了“fb样容器”样式(它增加了10‘s顶部和底部边距以将按钮从标题和边缘移开)，但这不是罪魁祸首。有人有其他想法吗？

埃塔:看了几个小时的Fancybox脚本后，我终于找到了答案。我将#.fancybox.update()；移到afterLoad:函数中。虽然我的测试还为时尚早，但这个盒子现在似乎可以在手机上正确地调整大小。

现在，我想知道FB.XFBML.parse()是否也需要在afterLoad中。Fancybox 3中的"beforeShow“和"afterShow”是旧代码吗？测试版已经发布了近两年--我希望这个版本有更多的文档。我被它绊倒了，但是它的滑动效果很好。比我用Fancybox 2尝试过的插件要流畅得多。

第二个编辑:这里是我的位置:如果我添加了一个样式，指定按钮插件(20 Am)的精确高度，并将$.fancybox.update()；放到afterLoad函数中，它就能工作。所以，there...if之外的任何人，这就是你所需要的，这是可行的。

然而，我的目标一直是拥有一个相似的按钮和一个评论框。但是，当然，不能为注释框指定高度。如果将$.fancybox.update()；移动到afterLoad中，Fancybox不会调整lightbox区域的大小以适应注释框--它挂在边缘上。如果您希望注释框适合该区域，则需要将更新脚本移回afterShow中--但随后将得到由“相似”按钮造成的巨大空白，这是最初的问题！

我在继续努力--只是想让大家了解我的最新进展。主要的问题是，$.fancybox.update()脚本不能在afterLoad中，除非动态内容(Facebook )有专门设置的高度，否则它不会根据需要展开lightbox。任何人的想法仍然是受欢迎的！

第三，编辑--只有在移动设备上加载特定图像的照明盒时，才会出现额外的空白。如果你把你的设备转到一边(水平或垂直)，灯箱调整大小，空白消失！把它转回到原来的方向，空白就会消失。然后转到下一个图像，空白又回来了。

换句话说，这个巨大的空白只有在光照盒的图像第一次加载时才会出现(在手机上)。我假设Fancybox在移动设备的方向改变时运行脚本，而该脚本似乎解决了问题。这是"onUpdate“脚本吗？当图像第一次加载时，有任何方式发生相同的事情吗？这能解决问题，但我不知道该怎么做。我一直在玩添加"onUpdate“作为一个函数(在afterShow之后)，但是它要么没有做任何事情，要么就把整个脚本搞砸了。