Before/After Scrubber

Drag blue handle to scrub between before and after images.

by Grok Digital Designs

HTML

<div id="container" unselectable='on' onselectstart='return false;' onmousedown='return false;'>
    <div id="after" unselectable='on' onselectstart='return false;' onmousedown='return false;'>
        <img src="http://s17.postimg.org/5ne25n9m7/after.jpg" />
    </div>
    <div id="before" unselectable='on' onselectstart='return false;' onmousedown='return false;'>
        <img src="http://s7.postimg.org/3owlvvfu3/before.jpg" />
    </div>
    <div id="vBar"></div>
    <div id="handle"></div>
</div>

CSS

body, #container, #before, #after  {
	position:absolute;
	top:0;
	left:0;
	margin:0px;
	padding:0px;
	border:0px;
	overflow:hidden;
}

img {
	position:absolute;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

#vBar {
	position:absolute;
	background-color:#0000FF;
	width:2px;
	margin-left:-1px;
}

#handle {
	position:absolute;
	background-color:#66FF66;
	width:10px;
	margin-left:-5px;
}

JavaScript

$(document).ready(function() {
    var newW = $("#before img").width();
    var newH = $("#before img").height();
	$("#handle, #vBar").hover(
		function() {$(this).css('cursor','pointer');},
		function() {$(this).css('cursor','auto');}
    );	
		
	$("#handle, #vBar").mousedown(function() {
        $(window).mousemove(function(event) {
			if (event.pageX >= newW){
				$("#handle, #vBar").css("left", newW+"px");
				$("#before").width(newW);
			} else if (event.pageX <= 0) {
				$("#handle, #vBar").css("left", 0+"px");
				$("#before").width(0);
			} else {
				$("#handle, #vBar").css("left", event.pageX+"px");
				$("#before").width(event.pageX);
			}
		});	
	});

	$(window).mouseup(function() {
        $(window).unbind("mousemove");
	});
    
    $("#before img, #after img").css({
        'width': newW+'px',
        'height': newH+'px'        
    });
    
	$("#container, #before, #after").css({
		'width': newW+'px',
		'height': newH+'px'
	});
    
	$("#vBar").height(newH).css('left', newW/2+"px");
	$("#handle").css({
		'left': newW/2+'px',
		'height': newH*.2+'px',
		'margin-top': '-'+newH*.1+'px',
		'top': newH/2+'px'		
	});
    
	$("#before").width(newW/2);
});