Rotating Image Using JQuery

January 6th, 2011 by aditia rahman / 8 Comments  

     

This is my experimental code using JQuery, in this post I want to show you the way how to rotating image using JQuery, so this is what I will create, single image with one button controller that located in the center of the image, and to rotate it user must drag the center button (which mean right click and hold) and the image angle will change based on mouse position.

View Demo | Download Source

Let’s get through the code, here are the html code

<div id="container">
    <p>
        <a href="">Back to Post</a>
        &nbsp;&nbsp;
        <a href="">Download Source</a>
    </p>
    <p>Drag On The Center Image to Rotate</p>
    <div id="bt_drag">
        <img id="icon" src="img/rotate_64.png"/>
    </div>
    <div id="bt_center">
        <img id="icon" src="img/rotate_64.png"/>
    </div>
    <div id="box"><img src="img/img.jpg"/></div>
</div>

You can see on the code above, I’m using JQuery UI to do a little tricky in rotate controller, there will be two rotate controller inside the image, when user dragging the controller one will stay in the center of image and one will be draggable to track mouse position, and to track when mouseup event being triggered, and now is the javascript code in JQuery

$(document).ready(function() {
    $("#bt_drag").draggable({ containment: "#container" });

    var bPos = $("#box").offset();
    var bWidth = $("#box").width();
    var bHeight = $("#box").height();

    var center_top = (bHeight + bPos.top) - (bHeight / 2) - 16;
    var center_left = (bWidth + bPos.left) - (bWidth / 2) - 16;

    $("#bt_drag").show();
    $("#bt_center").show();

    $("#bt_drag").css("top", center_top);
    $("#bt_drag").css("left", center_left);

    $("#bt_center").css("top", center_top);
    $("#bt_center").css("left", center_left);

    $(document).mousemove(function(e){
        window.mouseXPos = e.pageX;
        window.mouseYPos = e.pageY;
    });

    $("#bt_drag").mousedown(function(e) {
        var bPos = $("#box").offset();
        var bWidth = $("#box").width();
        var bHeight = $("#box").height();

        var center_top = (bHeight + bPos.top) - (bHeight / 2);
        var center_left = (bWidth + bPos.left) - (bWidth / 2);

        intervalId = setInterval(function() {
            y = center_top - window.mouseYPos + 32;
            x = window.mouseXPos - center_left - 32;

            r = 360 - (180/Math.PI) * Math.atan2(y,x);

            $("#box").css("transform","rotate("+r+"deg)");
            $("#box").css("-moz-transform","rotate("+r+"deg)");
            $("#box").css("-webkit-transform","rotate("+r+"deg)");
            $("#box").css("-o-transform","rotate("+r+"deg)");

            $("#bt_drag").css("transform","rotate("+r+"deg)");
            $("#bt_drag").css("-moz-transform","rotate("+r+"deg)");
            $("#bt_drag").css("-webkit-transform","rotate("+r+"deg)");
            $("#bt_drag").css("-o-transform","rotate("+r+"deg)");

            $("#bt_center").css("transform","rotate("+r+"deg)");
            $("#bt_center").css("-moz-transform","rotate("+r+"deg)");
            $("#bt_center").css("-webkit-transform","rotate("+r+"deg)");
            $("#bt_center").css("-o-transform","rotate("+r+"deg)");
        }, 100);
    }).mouseup(function() {
        clearInterval(intervalId);
        var currentPos = $("#bt_center").offset();
        $("#bt_drag").animate({
            top: currentPos.top,
            left: currentPos.left
            }, "slow", function() {
        });
    });
});

If you are separating the javascript code make sure you include it in the bottom, before the </body> closing tag, I experience a little bug in Safari and Chrome. Last is the CSS code

* {
    font-family: Arial, "Free Sans";
}
body {
    background: #fff url('../img/pattern8-pattern-014.png') repeat right top;
}

#container {
    margin:0 auto;
    text-align: center;
}
#box {
    margin: 0 auto;
    width: 381px;
    height: 333px;
    padding: 7px;
    background: #fff;
    -moz-box-shadow: 2px 2px 5px #333;
    -webkit-box-shadow: 2px 2px 5px #333;
    box-shadow: 2px 2px 5px #333;
    position: relative;
}
#bt_drag, #bt_center {
    display: none;
    position: absolute;
    z-index: 25;
    height: 64px;
    width: 64px;
    padding: 5px;
    background: #d3d3d3;
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 2.5em;
    opacity:0.7;
    filter: alpha(opacity=70);
    cursor: move;
}
#bt_drag {
    opacity:0.3;
    filter: alpha(opacity=30);
}
#bt_center {
    z-index: 20;
}
#rotate_icon a img, #bt_center a img {
    border: 1px solid #fff;
}
p {
    text-shadow: 2px 2px 2px #333;
    font-size: 30px;
    fon-weight: bold;
    color: #fff;
}
p a {
    opacity: 0.8;
    filter: alpha(opacity=30);
    padding: 10px 15px;
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 2.5em;
    background: #fff;
    font-size: 24px;
    text-shadow: 1px 1px 1px #333;
    color: #000;
    text-decoration: none;
}
p a:hover {
    background: #d3d3d3;
}

That’s all really easy isn’t? like always here are the the example screen capture, download link and online demo, and because this is using CSS3 this example won’t work in current available IE (very old IE, IE6, IE7 or IE8). One more thing if you want another way to rotate image here is the more advanced tutorial smooth rotatable image.

View Demo | Download Source
        submit to reddit Delicious

8 Comments Leave a Comment Subscribe RSS

Leave a Comment