Question

我只是创建了一个愚蠢的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}
    });

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容器内的图像。

因此，我们使用此链接链接到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;中的值以设置您想要的尺寸。

参见 JSFIDDLE

注意：这适用于fancybox v2.1.3 +（使用风险自负;）

Answer 2

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。如果您打开开发人员控制台，您将看到记录“当前”的内容。这是一个包含各种有用信息的对象

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

2 个答案: