jquery - WordPress 上的 fancyBox 调整大小 onWindow 调整大小

Question

我正在为 WordPress 使用 fancyBox 插件，但我遇到了问题。当我调整窗口大小时，弹出窗口不会调整大小，但是如果我在调整窗口大小的图像中导航，它会正确调整弹出窗口的大小。我正在尝试像这样进行额外的回调：

window.onresize = function(event) {
   $.fancybox.resize();
}

但它显示一个错误：$ is not defined.

Answer 1

尝试使用jQuery而不是$

window.onresize = function(event) {
   jQuery.fancybox.resize();
}

Answer 2

您应该使用$(window).resize()and not window.onresize，因为使用本机事件处理程序可能会干扰或被 jQuery 干扰。因此，如果您有 jQuery，请使用 jQuery 方法。

我不知道你有什么版本的 FancyBox ^$，但如果你是最新的（2.1.0），你可以传递autoDimensions: true给构造函数，它会为你做：

autoDimensions: true
对于内联和 ajax 视图，将视图大小调整为元素接收。确保它有尺寸，否则会产生意想不到的结果

$(document).ready(function() {
    $("a").fancybox({
        openEffect: 'none',
        closeEffect: 'none',
        width: 400,
        height: 300,
        autoDimensions: true
    });
});

演示，源码

您还可以使用以下一项或多项：

 Method                 Description
----------------------------------------------------------------------------
 $.fancybox.resize  // Auto-resizes FancyBox height to match content height
 $.fancybox.center  // Centers FancyBox in viewport

---

_{^$根据this answer from 2010，$.fancybox.resize()适用于v1.3及以下版本。但是，它实际上在最新的（2012 年 9 月 19 日）文档中被引用，位于Public Methods的最底部。}

Answer 3

也许试试这个...

JQuery(document).ready(function() {

  window.onresize = function(event) {
    JQuery('.fancybox').resize();
  }

)};

类.fancy是正确的吗？