jangle – the jQuery rotation plugin

Welcome to the jangle project page! jangle is a jQuery plugin that allows you to rotate an image or any other HTML element by simply applying jangle to the jQuery selector of your choice! Rotate away!

Available Options

The jangle plugin has the following options to create various rotation effects:

continuous: true or false, // account for previous rotations? (default is false)
degrees: 0,                // degrees element should be rotated
duration: 0,               // length of time (in m/s) the animation takes
interval: 100              // length of time (in m/s) between each rotation occurs

NOTE: The interval should always be larger than the duration option.

Requirements

To use jangle, you must be using jQuery version 1.6+. It has been fully tested on IE6+ and the latest versions of Chrome, Firefox and Safari.

**NOTE:** While this does work in IE6/IE7/IE8, due to the way position: relative; works, layout behavior may not be consistent.

Setup

Reference the jQuery library followed the jangle JavaScript file:

  <!-- load jQuery library -->
  <script src="/common/js/libs/jquery-1.5.2.min.js"></script>

  <!-- load jangle plugin -->
  <script src="jquery-jangle-0.3.js"></script>

Examples

Now you are ready to use jangle! Here is some example code on the how you can use it.

Page Load

// rotate a DIV 90 degrees
$('div').jangle(90);

Event Driven

// rotate a DIV 90 degrees upon clicking a link
$('a').click(function() {
  $('div').jangle(90);
});

Input Driven

// see jangle-example.html for full code sample
// rotate an image based on input value
$('button').click(function() {
  var angle = parseInt($('input[type=text]').val()) || 0;

  $('img').jangle(angle);
});

Slider Driven

// see jangle-example.html for full code sample
// rotate an image based on slider position
$('.slider').slider({
  min: 0, // degrees
  max: 360, // degrees
  slide: function(e, ui) {
    $('img').jangle(ui.value);
  },
  stop: function(e, ui) { // in case you out slide the slider
    $('img').jangle(ui.value);
  }
})