在fancybox中加载150％大小的图像 [英] loading an image 150% of its size within fancybox

问题描述

我只是创建了一个愚蠢的GIF图库，其中显示了缩略图，点击后相关的GIF被加载并显示在fancybox中。

I am just creating a silly GIF gallery where there is a thumbnail displayed and when clicked the relevant GIF gets loaded and displayed in a fancybox.

代码fancybox我有这个：

The code for the fancybox I have is this:

$(".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％。我怎样才能做到这一点？我尝试了很多东西：（

The onStart: is an attempt at getting the image to load bigger than it's original size, as alot of GIFs are very small, I want to load them 150% or 200% than their original size. How can I do this? I have tried many things :(

编辑：经过进一步调查，似乎onStart函数无法正常工作，这可以解释为什么我没有得到任何结果我在那里放了 console.log（'foobar'）; 和 alert（'whipcrackaway'）; in没有任何结果。我无法解决原因。无论如何都没有错误。

After further investigation, It would seem that the onStart function is not working whatsoever, which would explain why I am not getting any results. I have put console.log('foobar'); in there and alert('whipcrackaway'); in there and no results whatsoever. I cannot work out why. There are no errors either whatsoever.

推荐答案

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

First, you are using in your code fancybox v2.x API options so I assume that you are using that version, aren't you?

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

Second, if the first assumption is correct, then onStart is not a valid fancybox v2.x option but v1.3.x (fancybox v2.x options are new and not compatible with previous versions).

第三次，您需要进行一些计算并修改两个元素的大小：fancybox容器和fancybox里面的图像c ontainer。

Third, you need to make some calculations and modify the size of two elements : the fancybox container AND the image inside of the fancybox container.

通过这个链接我们链接到150x150px图像的成像

So imaging that we are linking to an image that is 150x150px with this link

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

...我们希望在fancybox中以200％的原始尺寸显示它，例如，然后我们将使用 beforeShow 回调设置此自定义脚本，如：

... and we want to show it in fancybox with a 200% of the original size for instance, then we will set this custom script with the beforeShow callback like :

$(".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; 设置您想要的尺寸。

Change the value in var newWidth = this.width * 2; to set your wanted size.

参见 JSFIDDLE

See JSFIDDLE

注意：这适用于fancybox v2.1.3 +（使用风险由您自行承担; ）

NOTE : this is for fancybox v2.1.3+ (use at your own risk ;)

这篇关于在fancybox中加载150％大小的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！