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

첫 번째 슬라이드에서 해고 된 것으로 생각하지 않기 때문입니다.