Lightbox for background images

With a javascript code and some styling you can make a lightbox for your slider. You could put this for example into the Edit Slider -> HTML widget. This code isn’t just for background images, but it will show the first image it can find on the active slide, if there isn’t a background image selected.

<script>
jQuery(document).ready(function(){
	jQuery('.ss2-align').on( 'click','.smart-slider-slide-active', function() {
		var theImage = new Image();
		if(jQuery('.image1').find('img').length == 1){
		    theImage.src = jQuery('.image1').find('img').attr('src');
		} else {
		    theImage.src = jQuery(this).find('img').attr('src');
		}
		var width = theImage.width;
		var height = theImage.height;
		var ratio;
		if(width>jQuery(window).width()){
		    ratio = width/jQuery(window).width();
		    width = jQuery(window).width();
		    height = height/ratio;
		}
		if(height>jQuery(window).height()){
		    ratio = height/jQuery(window).height();
		    height = jQuery(window).height();
		    width = width/ratio;
		}
		jQuery('body').append('<div class="lightboxbg"><div class="lightbox"><img src="' + theImage.src + '"></div></div>');
		jQuery('.lightbox').css({
			'width':width,
			'height':height,
			'marginLeft':-(width/2),
			'marginTop':-(height/2)
			});
		jQuery('.lightbox img').css({
			'width':width,
			'height':height
			});
		jQuery('.lightboxbg').click(function(){
			jQuery('.lightboxbg').remove();
		});
	});
});
</script>
<style>
.lightboxbg{
	position:fixed;
	background:rgba(0,0,0,0.5);
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:9999;
}
.lightbox{
	position:absolute;
	left:50%;
	top:50%;
	z-index:1;
}
.smart-slider-slide-active, .lightboxbg{
	cursor:hand;
	cursor:pointer;
}
</style>