2

我只是在创建一个愚蠢的 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');但没有任何结果。我不知道为什么。也没有任何错误。

4

2 回答 2

3

首先，您在代码中使用了 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>

...例如，我们希望以原始大小的 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;以设置您想要的大小。

见JSFIDDLE

注意：这是针对 fancybox v2.1.3+（使用风险自负；）

于 2013-01-08T17:47:43.570 回答
0

onStart 将在加载内容之前运行，因此图像还没有“存在”。

首先，我建议你获取最新版本的 Fancybox 2（我看到 onStart 是 fancybox 1.3 的功能）： http: //fancyapps.com/fancybox/

然后使用 afterLoad 回调函数：

$(".fancyGIF").fancybox({
    afterLoad: function(current, previous) {
        current.inner // points to the new content
            .find('img').css({width: '200%'});
    }
});

这应该将所有图像放大到两倍大小。您还可以设置像素值，使所有图像大小相同。或指向另一个函数以使其有条件：

$(".fancyGIF").fancybox({
    afterLoad: function(current, previous) {
        var $img = current.inner.find('img');
        $img.css({width: normaliseWidth($img)});
    }
});

function normaliseWidth($img) {
    var width = $img.width();
    if (width < 100) { // if smaller then 100px
        return (width * 2) +'px'; // blow up to twice the size
    } else {
        return width +'px';
    }
}

- 编辑 -

使用这个 html

<a href="http://upload.wikimedia.org/wikipedia/commons/9/9d/Animalien-smiley.gif" class="fancyGIF">
    <img src="http://upload.wikimedia.org/wikipedia/commons/9/9d/Animalien-smiley.gif" alt="alien" />
</a>

您可以在此处看到它的工作原理：http: //jsfiddle.net/pT7jC/1/ 请注意，我添加了一个 console.log。如果你打开开发者控制台，你会看到记录了“current”的内容。这是一个包含各种有用信息的对象

于 2013-01-08T11:31:21.397 回答