Before/After Scrubber

Drag blue handle to scrub between before and after images.

HTML

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

CSS

body {
    margin:0px;
    padding:0px;
    border:0px;
    position:absolute;
    overflow:hidden;
}
#container {
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}
#before {
    position:absolute;
    top:0px;
    left:0px;
    overflow:hidden;
}
#after {
    position:absolute;
    top:0px;
    left:0px;
    overflow:hidden;
}
#vBar {
    background-color:#0000FF;
    width:2px;
    position:absolute;
    margin-left:-1px;
    z-index:20;
}
#handle {
    background-color:#6666FF;
    width:10px;
    height:50px;
    position:absolute;
    margin-left:-5px;
    margin-top:-25px;
    z-index:21;
}

JavaScript

var newW = 0;
var newH = 0;

$(document).ready(function () {
    newW = $("#before img").width();
    newH = $("#before img").height();

    $("#handle, #vBar").hover(

    function () {
        $(this).css('cursor', 'pointer');
    },

    function () {
        $(this).css('cursor', 'auto');
    }).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");
    });
    $("#container, #before, #after").css({
        'width': newW + 'px',
            'height': newH + 'px'
    });
    $("#vBar").height(newH).css('left', newW / 2 + "px");
    $("#handle").css({
        'left': newW / 2 + 'px',
            'top': newH / 2 + 'px'
    });
    $("#before").width(newW / 2);
});