Question

我设置了Fancybox，以便每个图像在具有独特Facebook喜欢/共享按钮的灯箱中打开。在Fancybox 2中，窗口完全调整大小以适应计算机和移动设备上的标题和按钮。

但是在新的Fancybox 3中（我添加了以启用刷卡功能），Fancybox在插件按钮下面添加了一个巨大的空白区域 - 但仅限于移动设备。我无法弄清楚如何移除这个空间 - 而且它足够大，看起来真的很尴尬。由于Facebook按钮在移动设备上通过Fancybox 2查看时很好，我猜这是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，脚本非常相似。根据本网站的建议，我只改变了＃34; beforeShow＆＃34; to＆＃34; afterLoad＆＃34;并将标题助手更改为＆＃34;标题。＆＃34;

$("#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会因插件而增加100px左右的垂直空间。我甚至删除了＆＃34; fb-like-container＆＃34;样式（增加10px的顶部和底部边距，使按钮远离标题和边缘），但这并不是罪魁祸首。有没有其他想法？

ETA：经过几个小时盲目查看Fancybox脚本后，我可能终于找到了答案。我移动了＃.fancybox.update（）;进入afterLoad：函数。现在这个盒子似乎在移动设备上正确调整大小，尽管我的测试仍然很早。

现在我想知道FB.XFBML.parse（）是否也需要在afterLoad中。是＆＃34; beforeShow＆＃34;和＆＃34; afterShow＆＃34; Fancybox 3中的旧代码？测试版已经推出了近两年 - 我希望有更多关于这个版本的文档。我对它有些绊脚石，但刷卡效果非常好。比我用Fancybox 2试过的插件要平滑得多。

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

但是，我的目标始终是拥有一个类似按钮和一个评论框。但是，当然，您无法为注释框指定高度。如果你移动$ .fancybox.update（）;进入afterLoad后，Fancybox不会调整灯箱区域的大小以适应评论框 - 它会从边缘悬挂下来。如果你想让评论框适合该区域，你需要将更新脚本移回到AfterShow - 但是你会得到由Like按钮引起的大量空白区域，这是原始问题！

我继续努力 - 只是想我会更新任何对我的进步感兴趣的人。主要问题是$ .fancybox.update（）脚本不能在afterLoad中，除非动态内容（Facebook插件）具有专门设置的高度 - 否则它不会根据需要扩展灯箱。任何人的想法仍然受欢迎！

第三次编辑 - 只有在移动设备上加载特定图像的灯箱时才会出现额外的空白区域。如果您将设备转到侧面（水平或垂直），灯箱会调整大小并且空白区域会消失！将其转回原始方向，白色空间仍然消失。但是然后转到NEXT图像，白色空间又回来了。

换句话说，只有灯箱的图像FIRST加载（在移动设备上）时才会出现巨大的空白区域。我假设Fancybox在移动设备的方向转向时运行脚本，并且该脚本似乎可以解决问题。那是＆＃34; onUpdate＆＃34;脚本？有什么方法可以在图像首次加载时发生同样的事情吗？这样可以解决问题，但我不知道该怎么做。我已经玩过添加＆＃34; onUpdate＆＃34;作为一个函数（在afterShow之后）但它要么没有做任何事情，要么搞砸了整个脚本。

Answer 1

像往常一样，修复程序看似简单，并且不涉及更改任何Fancybox脚本。

我的Fancybox 3脚本与上面显示的相同。解析和更新仍在afterShow中。

我所要做的就是为容纳Facebook Like按钮的容器添加一个高度。 Like按钮已经在容器DIV中，它启用了顶部和底部边距（将按钮与标题和注释框分开）。我只是为这个容器DIV添加了一个高度，突然之间，Fancybox在移动设备上加载Like按钮时想要添加的所有空白区域都消失了。瞧！

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

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

如果您在移动设备上查看我的Fancybox 3链接，仍然会在灯箱底部看到额外的空白区域：该空间是由评论框引起的，这是一个已知问题。我在这篇文章中需要消除的白色空间是一个单独的情况，而且更大更烦人。

希望有一天能用Fancybox帮助其他人！

Fancybox 3没有在移动设备上调整Facebook插件的大小

1 个答案: