responsive height Cycle2 (overlay slide one) WORKING

by sambaldwin

HTML

<script src="http://malsup.github.com/min/jquery.cycle2.min.js"></script>
<div class="cycle-slideshow item" 
			    data-cycle-fx="scrollHorz"
			    data-cycle-timeout="3000"
			    data-cycle-speed="1000"
			    data-cycle-slides="> div"
				data-cycle-auto-height=container
			    >
                    <span class="overlay"></span>
                    
                    <div class="cycle-slide">
                        <img src="http://placehold.it/600x750/" />
					</div>

					<div class="cycle-slide">
                        <img src="http://placehold.it/600x750/" />
					</div>

					<div class="cycle-slide">
                        <img src="http://placehold.it/600x750/" />
					</div>

</div>

CSS

.cycle-slide {
    position:relative;
    width:100%;
}

img {
    display:block;
    max-width:100%;
}

.overlay {
    background:rgba(255,255,0,0.5);
    position:absolute;
    top:0;
    left:0;
    z-index:999;
    display:none;
    cursor:pointer;
}

JavaScript

$('.item').hover(function () {        
    $('.overlay', this).show();
    }, function() {
    $('.overlay', this).fadeOut();
});

var imgheight = $(".cycle-slide img").height(); 
var imgwidth = $(".cycle-slide img").width(); 

$(".overlay").css("height", imgheight).css("width", imgwidth);

$('.item').on('cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    $('.overlay', this).css({'width':$('img',incomingSlideEl).css('width'), 'height': $('img',incomingSlideEl).css('height')});
});

$(window).resize( function(){ 
   

	$(".overlay").css("height", imgheight).css("width", imgwidth);
	});