jQuery Cycle2 - 叠加大小以匹配幻灯片的图像大小

Question

我试图用jQuery来获取Cycle2幻灯片中当前幻灯片的图像大小。

这样我就可以设置出现在.hover（）上的覆盖div（.overlay）的大小。正如您在fiddle中看到的那样，它只会从第一张图片中获取大小。这些图片也会有反应，所以.overlay也需要根据任何窗口大小来更新它的大小。

这里是fiddle环节又和全码：

var imgwidth = $('.cycle-slide img').width(); 
var imgheight = $('.cycle-slide img').height(); 

$('.cycle-slide').hover(function() {   
    $('.overlay', this).css('width', imgwidth).css('height', imgheight).fadeIn(); 
    }, function() { 
    $('.overlay', this).fadeOut(); 
}); 

我怎样才能得到.overlay到每张幻灯片的图像尺寸相匹配？

非常感谢提前。

Answer 1

你或许应该挂钩到cycle-after事件来设置宽度..东西与此类似：

$('.cycle-slideshow').on('cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) { 
    $('.overlay', this).css({'width':$('img',incomingSlideEl).css('width'), 'height': $('img',incomingSlideEl).css('height')}); 
}); 


$('.cycle-slide').hover(function() {   
    $('.overlay', this).show(); 
    }, function() { 
    $('.overlay', this).fadeOut(); 
}); 

你可能需要做的唯一的事情就是设置第一个覆盖的宽度和高度外事件，因为我不认为它是在第一张幻灯片上被解雇的。