jquery - 在 fancybox 中加载其大小的 150% 的图像

Question

我只是创建了一个愚蠢的 GIF 画廊，其中显示了一个缩略图，当点击相关的 GIF 时，相关的 GIF 被加载并显示在一个花式框中。

我的 fancybox 的代码是这样的:

$(".fancyGIF").fancybox({
        arrows: false,
        openEffect: 'elastic',
        openSpeed: 150,
        closeEffect: 'elastic',
        closeSpeed: 150,
        closeClick: true,
        onStart: function(){
            $("img").width("400");
        },
        helpers: {overlay : null}
    });

onStart: 尝试加载比原始尺寸更大的图像，因为很多 GIF 非常小，我想加载比原始尺寸大 150% 或 200% 的图像.我怎样才能做到这一点？我已经尝试了很多东西:(

编辑:经过进一步调查，似乎 onStart 函数根本不起作用，这可以解释为什么我没有得到任何结果。我已将 console.log('foobar'); 和 alert('whipcrackaway'); 放在那里，但没有任何结果。我不知道为什么。也没有任何错误。

Answer 1

首先，您在代码中使用了 fancybox v2.x API 选项，所以我假设您正在使用该版本，不是吗？

第二，如果第一个假设是正确的，那么 onStart 不是一个有效的 fancybox v2.x 选项而是 v1.3.x(fancybox v2.x 选项是新的且与以前的版本不兼容)。

第三，您需要进行一些计算并修改两个元素的大小:fancybox 容器和fancybox 容器内的图像。

想象一下，我们正在使用此链接链接到一张 150x150 像素的图像

<a class="fancyGIF" href="myGIFimage150x150.gif">open bigger size at 200% (300x300px)</a>

...例如，我们想在 fancybox 中以原始大小的 200% 显示它，然后我们将使用 beforeShow 回调设置此自定义脚本，例如:

$(".fancyGIF").fancybox({
  beforeShow: function () {
    // set new fancybox width
    var newWidth = this.width * 2;
    // apply new size to img
    $(".fancybox-image").css({
      "width": newWidth,
      "height": "auto"
    });
    // set new values for parent container
    this.width = newWidth;
    this.height = $(".fancybox-image").innerHeight();
  }
});

更改 var newWidth = this.width * 2; 中的值以设置您想要的大小。

参见 JSFIDDLE

注意:这是针对 fancybox v2.1.3+(使用风险自负；)