Cycle2 (overlay slide one)

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="1"
			    data-cycle-slides="> div"
			    data-cycle-next=".cycle-slide, .overlay"
				data-cycle-auto-height=container
			    >
                    					<span class="overlay"></span>

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

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

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

CSS

.cycle-slide {
    position:relative;
    width:100%;
    cursor:pointer;
}
img {
    display:block;
}
.overlay {
    cursor:pointer;
    background:rgba(255, 255, 0, 0.5);
    position:absolute;
    top:0;
    left:0;
    z-index:999;
    display:none;
}

JavaScript

// Overlay show / hide

var speed = 200;
$(".item").hover(function () {
    $(".overlay", this).fadeIn(speed);
}, function () {
    $(".overlay", this).fadeOut(speed);
});

$(".item").click(function () {
    $(".overlay", this).hide();
});

// Overlay size reboot
var imgwidth2 = $("img").width();
var imgheight2 = $("img").height();

$( '.cycle-slideshow' ).on( 'cycle-after', function( event, currSlide ) {
    // your event handler code here
    $(".overlay").css("width", imgwidth2);
    $(".overlay").css("height", imgheight2);
    // argument opts is the slideshow's option hash
});