alterImg - a jQuery before and after image slider

This is my first jQuery plugin, and it comes after a 6 year absence from coding. I'm not sure if it's a true plugin - I'm really just hijacking the built-in jQuery slider functionality.

It started out as an exercise during some downtime. I had seen plugins with this behavior, first on The Guardian's website and then on CatchMyFame.com. Being a fairly simple and lazy person, I thought there should be a simpler way of achieving the same effect. Below is the result. My version lacks the smooth sliding effect the others have when you click on the image. I'm willing to trade that for a tiny plugin and also, as I said, I'm lazy.

The plugin part that makes this work is only 4kb, so you're not adding a great load to what you're probably already using in your page.

Here's the code you'll need to make this work:

Put this in the head tags. The slider handle must be named in the style and its height and width set.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="jQuery/alterImg/jquery.alterimg-1.0.min.js"></script>
<style>
.ui-slider-range-max  {
    background: url() right bottom fixed no-repeat;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-state-hover, .ui-state-focus {
    background: url(jQuery/alterImg/slider_handle2.png) no-repeat 50% 50% ;
    border: 0px;
    width:60px;
    height:27px;
    }
.ui-slider-handle {
    opacity:.5
}
.ui-state-hover, .ui-state-active {
	opacity:1
}
</style>

Put this in the body where you want the image slider to be.

<div id="slider"></div>

Add this code to initiate the slider. There are 4 options that MUST be set - the before and after images, and their sizes.

<script language="javascript" type="text/javascript">
 $(document).ready(function() {
	$('#slider').alterImg({
		beforePhoto: 'jQuery/alterImg/lv_before.jpg',
		afterPhoto: 'jQuery/alterImg/lv_after.jpg',
		baWidth: 400,
		baHeight: 366
	});
});
</script>

---

PXL8 2011