在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} }); 

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的图像

 open bigger size at 200% (300x300px) 

…我们希望以原始大小的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.3function）： 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

你可以在这里看到它： http ： //jsfiddle.net/pT7jC/1/注意我添加了一个console.log。 如果您打开开发人员控制台，您将看到记录“当前”的内容。 这是一个包含各种有用信息的对象