jQuery Cycle2 – overlay size to match slide's image size

Question

I'm trying to use jQuery to get the current slide's image size in a Cycle2 slideshow.

This is so I can set the size of an overlay div (.overlay) that appears on .hover(). As you'll see in this fiddle, it is only getting the size from the first image. The images will be responsive too, so .overlay will also need to update it's size based on any window resizing.

Here is the fiddle link again, and the full code:

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

How can I get .overlay to match each slide's image size?

Many thanks in advance.

Answer 1

You should probably hook into the cycle-after event to set the width.. Something similar to this:

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

The only thing you may have to do is set the width and height of the first overlay outside the event because I don't think it is fired on the first slide.