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

你可能需要做的唯一的事情就是設置第一個覆蓋的寬度和高度外事件，因爲我不認爲它是在第一張幻燈片上被解僱的。