我需要创建一个取决于几个因素的图库,并执行一系列缩放以适合的图像。无论如何,我需要当你点击一个“触发器”按钮时,主容器几乎占据视口的整个可见区域,如果比例,它包含的图像是可观的比例。
我正在关注此reference
我不能做的行为是放大图像。当您单击其中一个时,拇指消失,主图像缩放。我的代码如下:
我根据一篇关于jQuery .animate()方法的小文章,使用放大图像的函数。
function resize(){
gallery = $('#items');
galleryH = gallery.height();
$('#items img').each(function() {
var height = $(this).height();
$(this).stop(true).animate({'height':galleryH},1000);
});
}
resize();
根据这种方法“动画化”仅高度,宽度自动由此保持比例。这似乎工作正常。如上所示,根据容器的高度进行缩放。
嗯,这在页面加载和缩放窗口大小时效果很好。然后我需要的是当你点击容器或其他按钮/ firer填充窗口时,类似于附加示例中发生的情况,并且图像根据此大小进行缩放。就像在此样品中。为此,请使用以下代码:
function changeView(){
if(gallery.hasClass("largeExp")){
gallery.removeClass("largeExp");
gallery.stop(true).animate({'height':'200px'},500);
console.log("Normal Mode");
}
else{
gallery.addClass("largeExp");
gallery.stop(true).animate({'height':'650px'},500);
console.log("Expand Mode");
}
console.log("Now would launch resize()");
resize();
}
$('#items').click(function() {
changeView();
});
嗯,发生的事情是画廊(容器)实际上“动画”了这些措施但没有包含在其中的图像。 resize()方法仅从第二次单击开始运行。在第一次点击很棒并且根据我的需要进行缩放,在第二次点击图像缩放到大尺寸,而图库(容器)移动到小模式或普通模式。从这里,容器和图像以相反的方式缩放。当容器处于正常模式时,图像处于扩展状态。工作因此画廊(容器)和图像永远不适合。我需要在扩展容器时,图像也会扩展。
我没有真正的JS经验,我确信我做错了什么。所以我希望你能帮助我,我已经失去了很多时间!
非常感谢你!
答案 0 :(得分:0)
我现在正在iPad上,所以我无法真正复制代码,但我现在能说的只是时间问题。会发生什么是单击按钮缩放图库,实际调用调整大小功能,同时启动动画缩放画廊需要500毫秒。您需要在调整大小函数上设置超过500毫秒的时间或调用animate方法内的函数。基本上你必须在画廊重新缩放完成后调用resize函数。
setTimeout(function() { resize(); }, 510);