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

您可能唯一需要做的就是在事件之外设置第一个叠加层的宽度和高度，因为我认为它不会在第一张幻灯片上触发。