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

您可能应该 Hook 到 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();
});

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