Version 1.4 of the Before/After plugin has been released with a new feature – keyboard navigation. Now you can use your left and right arrow keys to move the image divider. By default this option has been disabled. There are actually two new option parameters, enableKeyboard and keypressAmount. The first, enableKeyboard, can be set to true or false to enable keyboard navigation and the second, keypressAmount, is the number of pixels you want the divider to move each time the arrow is pressed. The main reason for setting enableKeybaord to false was for those running multiple instances of the plugin on a page. If the default was true, than a press of the arrow key would move the divider on all instances.

Visit the Before/After plugin page to download the latest version and try out the demos.

Sometimes you may not be able to pre-load the images you’re using with the before/after plugin. In that situation you may want to give your visitors some indication that the images are loading so that they’re not left scratching their heads wondering if there’s a problem. Fortunately with a little jQuery and CSS you can add a loading indicator to the before/after plugin.

The jQuery

After the jQuery code to instantiate the plugin, add (assuming a container with the id of “conjainer”):

$('#container').prepend('<p id="loader">Loading...</p>');
$('#container > div:eq(2) > img').load(function() {
	$('#loader').remove();
});

The CSS

Then add some styling. Here we’re adding an animated loading gif:

#container {
	border:2px solid #666;
}
#loader {
	background: #e9e9e9 url(ajax-loader.gif) no-repeat 50% 50%;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

And that’s it! Note that this is just a basic example and it only tests for one of the two images being loaded, however it’s basic to extend this concept further and even provide more feedback to the user.