andyhite / jquery-image-twister Goto Github PK

jQuery Twister
==============

NOTE: THIS PLUGIN ONLY WORKS IN BROWSERS THAT DON'T SUCK. That means you'll have to do something else for IE. It's not my fault. I swear. Apparently Firefox (Windows) doesn't play nice either, but I'm working on that.
Summary

jQuery Twister is a simple plugin that adds a "twist" effect to images when you hover over them. It is dependent on zachstronaut's jquery-animate-css-rotate-scale for animating element rotation in modern browsers, and I take no credit for his work (which does most of the heavy lifting).

Usage
=====

Unpack the JS files from the root and lib/ directories into your document root and include the following lines before the </head> tag at the top of your document (change the src paths if you put them in another directory):

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.transform.js" type="text/javascript"></script>
<script src="jquery.rotate.js" type="text/javascript"></script>
<script src="jquery.twister.js" type="text/javascript"></script>

Make sure the images you want to "twist" have container DIVs. Something like this:

<div class="image">
  <a href="#"><img src="images/thumb.jpg" /></a>
</div>

Initialize twister with the following:

<script>$(function(){ $('.image').twister(); });</script>

Options
=======

duration (String, Number): a string representing one of the predefined speeds ("slow" or "fast") or the number of milliseconds to run the animation (default: 250).

degrees (Number): a number representing degrees the image will rotate (default: 5)

scale (Number): a number representing how much to scale the image (default: 1.2)

overflown (Boolean): if set to true, the image will not be masked by it's containing frame. (default: false)

Limitations and Dependencies
============================

This plugin is dependent on zachstronaut's jquery-animate-css-rotate-scale (http://github.com/zachstronaut/jquery-animate-css-rotate-scale/) and is therefore limited to jquery-animate-css-rotate-scale's abilities. It does not, unfortunately, play nicely with Internet Explorer at this time. I am actively looking for a replacement that uses canvas for image rotation, but until I find or write one, there is no way around this limitation (IE just doesn't have a good CSS based rotate method). There are also (apparently) issues in Firefox for Windows that I will fix soon.

I know for a fact that it works in Safari (Win / Mac), Firefox (Mac), Chrome (Mac). Still need to do some Windows testing.

I also haven't tested in Opera yet. If it doesn't work in Opera, give me a heads-up.