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

我只是创建一个愚蠢的 GIF 画廊，其中显示一个缩略图，单击时相关的 GIF 将被加载并显示在一个 fancybox 中。

我的 fancybox 的代码是这样的：

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

The onStart:是尝试让图像加载大于其原始大小，因为很多 GIF 都非常小，我想加载它们比原始大小 150% 或 200%。我怎样才能做到这一点？我已经尝试了很多事情:(

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

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

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

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

想象一下我们通过此链接链接到一个 150x150px 的图像

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

...例如，我们希望以原始大小的 200% 在 fancybox 中显示它，然后我们将使用以下命令设置此自定义脚本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;设置您想要的尺寸。

See JSFIDDLE http://jsfiddle.net/EQmSN/

NOTE：适用于 fancybox v2.1.3+（使用风险自负；）