linein designs

Things you’ll need:

• PHP
• jQuery
• jQueryRotate plugin

DEMO | DOWNLOAD PROJECT

We’ll first setup the control div since it should help make things clearer starting here. We have the two rotate buttons (clockwise and anit-clockwise) and the save button to save our final rotated image. We also have an input box that will store the rotated value.

	
	
	save



current angle:

Next we have the javascript function that is going to rotate the images based on the buttons we press. Each time they are pressed it’s going to rotate the images 90 degrees either way. (you can change these value to fit your project)

function updateAngle(image,direction,currentAngle)
{
	var rotateAngle = 0;
	switch (direction)
	{
		case 'anticlockwise':
			if(currentAngle == 0){rotateAngle = -90;}
			else{rotateAngle = parseInt(currentAngle) - 90;}
		break;
		default:
			if(currentAngle == 0){rotateAngle = 90;}
			else{rotateAngle = parseInt(currentAngle) + 90;}
	}

	$('#'+image).rotateAnimation({
		animateAngle:rotateAngle
	});

	$('#currentAngle').val(rotateAngle); // sets currentAngle value
}

Then we have the AJAX request that will send the image and angle value to the PHP script to be saved.

$(document).ready(function()
{
	$('#saveImage').click(function(){
		$('#save_results').html('saving...'); // display while image is being saved
		$.ajax({
		   type: "POST",
		   url: "saveImageAjax.php",
		   data: "img=image.jpg&angle="+$('#currentAngle').val(), // image value is currently hard-coded due to plugin limitation
		   success: function(msg){
	     		$('#save_results').html(msg);
	   	}
	 	});
	});
});

And finally we have the PHP script that takes the variables and stores a local copy of the rotated image. The script is fairly straight forward, but if you have any questions, please leave me a comment below.

Credits:
rotateImage – PHP function developed by Roshan Bhattara (function included in project files)
iconfinder.com/ – icons

Similar Posts:

• jQuery Image Gallery with Transitions and Navigation
• Fade In and Out Images from a Single Directory Using jQuery (with plugin)
• jQuery AJAX Loading – Display Images or Text Until Script is Finished (Part 2)
• Fade in and Out the Most Recent Pictures in a Directory with jQuery
• jQuery Loading – Display Images or Text Until Script is Finished