Fancybox 3 不会在移动设备上调整 Facebook 插件的大小答案

【问题标题】：Fancybox 3 doesn't resize Facebook plugin on mobile devicesFancybox 3 不会在移动设备上调整 Facebook 插件的大小
【发布时间】：2014-09-19 17:05:43
【问题描述】：

我设置了 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 会因为插件而增加 100px 左右的垂直空间。我什至删除了“fb-like-container”样式（它添加了 10px 的顶部和底部边距以将按钮从标题和边缘移开）但这不是罪魁祸首。有人有其他想法吗？

ETA：在看 Fancybox 脚本数小时后，我可能终于找到了答案。我移动了 #.fancybox.update();进入 afterLoad: 函数。该框现在似乎可以在移动设备上正确调整大小，尽管我的测试还为时过早。

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

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

但是，我的目标一直是拥有一个赞按钮和一个评论框。但当然，您不能指定注释框的高度。如果你移动 $.fancybox.update();进入 afterLoad，Fancybox 不会调整灯箱区域的大小以适应评论框——它挂在边缘。如果您希望评论框适合该区域，则需要将更新脚本移回 afterShow - 但是您会得到由 Like 按钮引起的大量空白，这是最初的问题！

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

第三次编辑 - 仅当特定图像的灯箱加载到移动设备上时，才会出现额外的空白。如果您将设备转向一侧（水平或垂直），灯箱会调整大小并且空白区域会消失！把它转回原来的方向，空白还是没有了。但是再转到下一张图片，空白又回来了。

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

【问题讨论】：

嗯，测试版是......“测试版”，这使得它很难支持。无论您的问题的解决方案或解决方法如何，都可能与最终版本不兼容，您可能需要再次更改它。如果您希望将swipe 功能添加到旧的fancybox v2.x，您可能需要检查stackoverflow.com/q/9785189/1055987
谢谢 - 我尝试了该页面上的一些解决方案，但发现所有滑动过渡都很笨拙。 FB 3 Beta 更胜一筹。我已经缩小了这个问题的范围：FB 3 JS 文件中有一个脚本可以在调整大小时更改 iOS 设备上的文档高度。当它运行时，就是灯箱正确调整插件大小的时候（参见第三版编辑）。如果这可以在第一次加载灯箱时运行，在 Facebook 插件加载之后，那可能会解决问题。你知道这是否可能吗？我会使用什么函数/调用？

标签： jquery facebook fancybox fancybox-2

【解决方案1】：

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

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

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

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

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

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

希望有一天这可以帮助其他人使用 Fancybox！

【讨论】：