Lightbox for image items

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 will make a lightbox for those image items, which have the lightboxme css class on them. In the lightbox the same image will be, as the image item.
lightboxme

<script>
jQuery(document).ready(function(){
	jQuery('.ss2-align').on( 'click','.lightboxme', function() {
		var theImage = new Image();
		theImage.src = jQuery(this).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:fixed;
	left:50%;
	top:50%;
	z-index:10000;
}
.lightboxme, .lightboxbg{
	cursor:hand;
	cursor:pointer;
}
</style>