Image Rotate

Determining the current rotation of an image (within imageset). Provided is also a stepping function.

HTML

<script src="https://jqueryrotate.googlecode.com/files/jQueryRotate.2.2.js"></script>
<div id="wrap-ccaptcha">
    <img id="cimg1" class="ccaptcha-img" border="0" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjMxNjFDOUMzRTZCNDExRTJBRjdCRjlCMjJFMjZBNkFGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjMxNjFDOUM0RTZCNDExRTJBRjdCRjlCMjJFMjZBNkFGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzE2MUM5QzFFNkI0MTFFMkFGN0JGOUIyMkUyNkE2QUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzE2MUM5QzJFNkI0MTFFMkFGN0JGOUIyMkUyNkE2QUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Dp1qvAAABp0lEQVR42rzUTShEURQH8DeZSMqGRKkpUhaYMomkrEf5yEKRhZ1kYzMrZTZSFjY2NlPYWIwVG2oKC6WUyGKUIkrJ1ygR+Xj8T51Xr9f7uvfd59ZvMfXe/O8597yrac6rAq7hV9IxlGgSayFAqGFKNLQJ3hUE30O1SPCmglDDkt/QHoWh5BMSXqE0DKeKg79gzRoUtfyegGZNzdKhwIXkOOvb7kEaggdFVb7CIcxAHDphGsrsKk5DZcAqf/jb34Ms3EE3DEIrb2rO/EKCh0C2Qgp8hB0Ygxrog3W44RbTc88QMwfnJAN1busJzHJbqbJ5OIMPm3dWjdChANN6CctcXRsP5zZXprt0p4uCzyWDL2AcWqAXVuDK55EdRHkAGiQ+FboOj2AEklBvnlqPReeudXDbRCt+43MsuLTVzgvUGTvIKL6t3KTNpdfyzsMOpbkot/Y99Q/Bw3YHXgr5EEN3IeI0bQMhhdLwtnuN+lYIwRk/31jc4aqT9cTD62stKgxOidxMVXCrIDTPQyu0JhUE9zv9ecQluBg2oJGvRJFVBPsw6vTAnwADAG+E84Ia8grGAAAAAElFTkSuQmCC" />
    <img id="cimg2"...

CSS

#wrap-ccaptcha > img.ccaptcha-img {border:none !important; box-shadow:none !important;}
.info {display:block; width:350px; height:25px; border:#ccc 1px solid; padding:4px; margin-bottom:10px;}

JavaScript

;(function($) {
	$(document).ready( function() {
		
		/* Basic rotation stuff */
		$(".ccaptcha-img").each(function() {
			
			var rot = randStep(0, 360, 60);
			
			$("#init").append(rot);
			
			$(this).rotate(
			{ 
				angle: rot,
				bind: 
				{ 
					click: function()
					{
						rot +=60;
						$(this).rotate({
							duration:10,
							animateTo:rot,
							callback: function()
							{
								if (rot == 360) rot = 0
							}
						});
						$("#output").text($(this).attr("id") + ":" + rot);

						console.log($(this).attr("id") + ":" + rot);
					}
				}
			});
		});

    });
})(jQuery);

function randStep(min, max, step) {
    return min + (step * Math.floor(Math.random()*(max-min)/step) );
}