Howto rotate image using jquery rotate plugin?

Question

How do you rotate an image using jQuery-rotate plugin?

I have tried the following and it doesn't seem to work:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>View Photo</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.rotate.1-1.js"></script>
<script type="text/javascript">
var angle = 0;
setInterval ( function (e) {
    rotate();
}, 100 );
function rotate() {
    angle = angle + 1;
    $('#pic').rotate(angle);
}
</script>
</head>
<body>
<img border="0" src="player.gif" name="pic" id="pic">
</body>
</html>

Other methods that are supported by most browsers are wanted too, thanks!

score 23 · Accepted Answer · edited Jun 01 '12 at 13:39

23

You've got a 404 on jQuery and the jQuery plugin. Because of that, your page is throwing a JavaScript error, that $ is not defined.

You need to learn basic JavaScript debugging techniques. A quick search found this article that looks like a good place for you to start:

JavaScript Debugging Techniques with Firebug

edited Jun 01 '12 at 13:39

Peter Lang

54,264
27
148
161

answered Dec 13 '08 at 22:32

mqsoh

3,180
2
24
26

score 7 · Answer 2 · answered Nov 10 '09 at 20:30

7

Your logic for rotating the image is right. It will work if executed when the document is ready.

<script type="text/javascript">
//<![CDATA[
    var angle = 1;

    $(document).ready(function() {
        setInterval(function() {
            $("#pic").rotate(angle);
            /* angle += 1; Increases the rotating speed */
        }, 100);
    });
//]]>
</script>

answered Nov 10 '09 at 20:30

jvan

71
1
1

1

To elaborate on jvan's response: The reason to put it into document.ready is because the webpage DOM isn't ready yet to be modified (or 'looked at' by your javascript). More information on the ready event is here: http://docs.jquery.com/Tutorials:Introducing_$(document).ready() – Alex KeySmith Nov 06 '10 at 18:51
2

n.b. I'm just being pedantic, but I noticed Tom's not using the XHMTL doctype, the //<![CDATA[ is only needed if your using XHTML. More info here: http://stackoverflow.com/questions/66837/when-is-a-cdata-section-necessary-within-a-script-tag – Alex KeySmith Nov 06 '10 at 18:52

score 3 · Answer 3 · edited Aug 02 '10 at 01:56

Once you fix your jquery include issues, you can fix your script. Your syntax is wrong: Here is the fix:

<script type="text/javascript">
//<![CDATA[
    var angle = 1;

    $(document).ready(function(angle) {
        setInterval(function(angle) {
                $("#pic").rotate(angle);
                /* angle += 1; Increases the rotating speed */
        }, 100);
    });
//]]>
</script>

Howto rotate image using jquery rotate plugin?

3 Answers3

Linked