In this tutorial, we are going to rotate image using jQuery. In the previous tutorial, we have seen How Can I Generate a Random Alphanumeric String in PHP?.
In this image rotation example, we are using jQuery animate function. Using this function we are controlling the image transform property.
HTML Code with Rotate Buttons :
This code shows the image element and list of HTML buttons to rotate the image.<div>
<label>Rotate Image:</label>
<input type="button" class="btnRotate" value="90" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="-90" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="180" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="360" onClick="rotateImage(this.value);" />
</div>
<div><img src="image-rotate.png" id="demo-image" /></div>jQuery Rotate Function :
This jQuery function will rotate the image element by changing its transform property.function rotateImage(degree) {
$('#demo-image').animate({ transform: degree }, {
step: function(now,fx) {
$(this).css({
'-webkit-transform':'rotate('+now+'deg)',
'-moz-transform':'rotate('+now+'deg)',
'transform':'rotate('+now+'deg)'
});
}
});
}Full Code :
<html>
<head>
<title>jQuery Image Rotate</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script>
function rotateImage(degree) {
$('#demo-image').animate({ transform: degree }, {
step: function(now,fx) {
$(this).css({
'-webkit-transform':'rotate('+now+'deg)',
'-moz-transform':'rotate('+now+'deg)',
'transform':'rotate('+now+'deg)'
});
}
});
}
</script>
<style>
#demo-image{padding:25px 10px;}
.btnRotate {padding: 5px 10px;background-color:#FF0033;border: 0;color: #FFF;cursor: pointer;}
</style>
</head>
<body>
<div>
<label>Rotate Image:</label>
<input type="button" class="btnRotate" value="90" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="-90" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="180" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="360" onClick="rotateImage(this.value);" />
</div>
<div><img src="image-rotate.png" id="demo-image" /></div>
</body>
</html>
In our previous tutorial you have learned Live Table Edit with Jquery and Ajax. In this tutorial you will learn Live HTML table edit or inline table edit is a very user friendly feature that enable users to edit HTML table value directly by clicking on table cells. In this tutorial you will learn how to implement live editable HTML table with jQuery and PHP. We will use jQuery plugin Tabledit that provides AJAX enabled in place editing for HTML table cells.
Good luck and I hope this article can be useful. See you in the next article…
Also Read :
PHP Database Backup Client for MySQL
How to Backup MySQL Database using PHP
Update/Delete Multiple Rows using PHP
Ajax Pagination with Tabular Records using PHP and jQuery
Sendmail in PHP using mail(), SMTP with Phpmailer
PHP session time set unset and check existence