某ページで画像を回転させる必要があって、見つけたのがコレ。

・jQueryRotate – rotate image in browser by any angle

【参考】
・いろんな画像をクルックルクルックル回すイケイケjQueryプラグイン 「jQueryRotate」 | うずまきブログ
・アナログ時計をJavaScriptで作ってみた

IE6以降対応ってことで楽勝だと思っていたら、IE8で動かなかった。。。厳密には1回だけ回ってくれるけど、それ以降はまったく無反応。具体的にはこんな関数をクリックイベントに割り当ててました。

【JavaScript】

var rotateImg = 0;

//画像回転処理（右）
function clickTiltRightFunc(){
	rotateImg += 90;
	rotateImg = (rotateImg >= 360) ? 360 - rotateImg : rotateImg;
	
	$("#thumbImg img").rotate(rotateImg);
	$('input[name="rotateImg"]').val(rotateImg);
}

【html】

<div class="photo" id="thumbImg">
 <img src="xxxx.jpg">
</div>

公式サイトを改めてIE8で見たら「動いてないじゃん！」となったんだけど、「公式サイトのjQueryが2.xだから」と某所から指摘を受けて納得。

【参考】
・jQuery 2.0がついに正式リリース。IE8以前はサポートせず、より軽量で高速に － Publickey
・jQueryのバージョン1.xと2.xの違いは対応ブラウザ。Win XPつまりIE8以下・6以上のサポートが必要なら1系を使い，モダン・スマホサイトは2系を使う – プログラミングとIT技術をコツコツ勉強するブログ

で、いろいろ試してみて気づきました。IE8ではimgタグを直接指定しないとダメらしい。つまり $(“#thumbImg img”) のようなサイン省参照ではなく、直接imgタグにidをつけてそのidに対してrotateするということです。

改定版がこちら。

【JavaScript】

var rotateImg = 0;

//画像回転処理（右）
function clickTiltRightFunc(){
	rotateImg += 90;
	rotateImg = (rotateImg >= 360) ? 360 - rotateImg : rotateImg;
	
	$("#thumbImg").rotate(rotateImg);
	$('input[name="rotateImg"]').val(rotateImg);
}

【html】

<div class="photo">
 <img src="xxxx.jpg" id="thumbImg">
</div>

たったコレだけなんですけど、意外とハマったのでメモしておきます。