画像をマウスのドラッグで360度ぐりぐり回せるスクリプト jQuery Reel Plugin 覚え書き

なにこれ

• jQuery Reel Plugin は、いくつかの画像を繋げて見せられるスクリプトです。
• 画像を動画のようにしたり、360度回転させられたり、パノラマ風に見せたりできます。

• ←のサンプルでは、マウスで←→にドラッグすると、10度刻みに360度回転します。
• マウスのホイール↑で拡大、↓で縮小、クリックで移動、にしてみました。（拡張）
  ダブルクリックでも拡大、右クリックでも縮小になります。（拡張追加）
• たむこれ (Reel導入テスト) - よねぞんさん に付き合って遊んでいるものです。

目次

• 必要なスクリプトファイル と 更新履歴
• 連結した画像での書き方 （簡単呼び出し版）
• 連番の画像での書き方 （簡単呼び出し版・ズームなし）
• 連番の画像での書き方 （簡単呼び出し版・ズームあり）
• 連結した画像での書き方（通常版）
• 連番の画像での書き方（通常版・ズームなし）
• 連番の画像での書き方（通常版・ズームあり）
• 個別のオプションを指定する。（通常版）
• 個別のオプションを指定する。（簡単呼び出し版）
• 簡単呼び出しスクリプト "req_reel.js" の設定
• FireFoxでの画像のチラつきについて
• Options - Reel のオプション（公式ページより）

• ※FC2ブログの方への説明とサンプルページ
• ※下記サンプルのページ

必要なファイル

※サンプル・ファイル一式： sample_reel.zip [600kb]（下記が同梱されています）

• jquery.reel.js （名前を付けて保存） - jQuery Reel Plugin から
• jquery.min.js （名前を付けて保存） - jQuery から
• jquery.mousewheel.js （ページからダウンロード）
• jquery.myzoom.js （名前を付けて保存）
• req_reel.js （名前を付けて保存）（簡単呼び出しスクリプト）
  または for_reel_gecko.js （名前を付けて保存）（FireFox/旧Opera チラつき予防スクリプト）

更新履歴

• 2013-10-08 （最終更新）.. 旧Operaもチラついてたらしいので req_reel.js と for_reel_gecko.js 修正 。
• 2013-10-06 .. myzoom.js 修正、 FireFox で Reel がチラつくのを抑える機能を req_reel.js に追加。 （for_reel_gecko.js - 通常版用）
• 2013-10-04 .. 作成

連結した画像での書き方 （簡単呼び出し版）

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./req_reel.js"></script>

<p><img src="object.jpg" id="reel_image" width="276" height="126" alt="" /></p>
    <!--※連結した画像のファイル名は、1枚絵の画像ファイル名の後ろに「-reel」をつけて同じフォルダに置いておく。
     （"object.jpg" ⇔ "object-reel.jpg"）-->

<script type="text/javascript"> ready_reel('#reel_image', 59, 6); </script>
   <!--※画像のIMG要素のID、フレーム数（画像の枚数）、連結した画像の１行の枚数、の順に書きます-->

連番の画像での書き方 （簡単呼び出し版・ズームなし）

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./req_reel.js"></script>

<p><img src="object.jpg" id="reel_image" width="276" height="126" alt="" /></p>

<script type="text/javascript"> ready_reel('#reel_image', 60, 'image_###.jpg'); </script>
   <!--※画像のIMG要素のID、フレーム数（画像の枚数）、連番の画像のパスの表現、の順に書きます-->

連番の画像での書き方 （簡単呼び出し版・ズームあり）

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./req_reel.js"></script>

<p><img src="object.jpg" id="reel_image" width="276" height="126" alt="" /></p>

<script type="text/javascript"> ready_reel_zoom('#reel_image', 60, 'image_###.jpg'); </script>
   <!--※画像のIMG要素のID、フレーム数（画像の枚数）、連番の画像のパスの表現、の順に書きます-->

連結した画像での書き方（通常版）

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="./jquery.reel.js"></script>

<p><img src="object.jpg" id="reel_image" width="276" height="126" alt="" /></p>
    <!--※連結した画像のファイル名は、1枚絵の画像ファイル名の後ろに「-reel」をつけて同じフォルダに置いておく。
     （"object.jpg" ⇔ "object-reel.jpg"）-->

<script type="text/javascript">
$(function(){
	// 画像のID
	$('#reel_image').reel({
		frames: 59,	// フレーム数＝画像の枚数 (＝360÷1枚ごとの角度 -1)
		footage: 6	// 連結した画像の１行の枚数
	});
});
</script>

連番の画像での書き方（通常版・ズームなし）

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="./jquery.reel.js"></script>

<p><img src="image_001.jpg" id="reel_image" width="276" height="126" alt="" /></p>

<script type="text/javascript">
$(function(){
	// 画像のID
	$('#reel_image').reel({
		frames: 60,	// フレーム数＝画像の枚数 (＝360÷1枚ごとの角度 -1)
		images: 'image_###.jpg' // 画像のパス
			// ※"###"は連番の数字が入る、桁数のワイルドカード。連番は 1 からスタート
	});
});
</script>

連番の画像での書き方（通常版・ズームあり）

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="./jquery.myzoom.js"></script>
<script type="text/javascript" src="./jquery.reel.js"></script>

<p><img src="image_001.jpg" id="reel_image" width="276" height="126" alt="" /></p>

<script type="text/javascript">
$(function(){
	// 画像のID
	$('#reel_image').reel({
		wheelable: false,
		steppable: false,
		frames: 60,	// フレーム数＝画像の枚数 (＝360÷1枚ごとの角度 -1)
		images: 'image_###.jpg' // 画像のパス
			// ※"###"は連番の数字が入る、桁数のワイルドカード。連番は 1 からスタート
	}).myZoom({
		def: 1,	// ズームの既定値
		max: 4,	// ズームの最大値
		min: 1	// ズームの最小値
	});
});
</script>

個別のオプションを指定する。（通常版）

自動で画像を動かしたい場合は、#オプションをいくつか指定します。(画像の連結か連番かはどちらでもOK)

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="./jquery.reel.js"></script>

<p><img src="object.jpg" id="reel_image" width="276" height="126" alt="" /></p>
    <!--※連結した画像のファイル名は、1枚絵の画像ファイル名の後ろに「-reel」をつけて同じフォルダに置いておく。
     （"object.jpg" ⇔ "object-reel.jpg"）-->

<script type="text/javascript">
$(function(){
	$('#reel_image').reel({
		opening: 2.0,	// 開いたときだけアニメーションするなら、その間の秒数
		entry:   0.5,	// "opening"で開いたときの周波数："2"なら1秒間に2回転
//		speed:   0.4,	// 周波数：数字を入れると自動で動く。"2"なら1秒間に2回転
//		delay:   1.0,	// 最初の待ち時間
//		cw:      true,	// 右ドラッグ→で動かしたときの方向。false: 順方向[既定]、true: 逆方向
//		brake:   0.2,	// スワイプ（投げっぱなしドラッグ）で回転させたときのブレーキのかかり具合
		preloader: 15,	// Loading 状況のバーの高さ（px）

		frames: 59,	// フレーム数＝画像の枚数 (＝360÷1枚ごとの角度 -1)
		footage: 18	// 連結した画像の１行の枚数
	});
});
</script>

個別のオプションを指定する。（簡単呼び出し版）

簡単呼び出し版でも、個別に上記の #オプション を上書き指定することができます。
Reelのオプションは第４引数に指定します。
Zoomのオプションも変更したい場合は、第５引数に指定します。

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./req_reel.js"></script>

<p><img src="object.jpg" id="reel_image" width="276" height="126" alt="" /></p>

<script type="text/javascript">
	ready_reel_zoom('#reel_image', 60, 'image_###.jpg', {
		opening: 2.66,	// 開いたときだけアニメーションするなら、その間の秒数
		entry:   0.75,	// "opening"で開いたときの周波数："2"なら1秒間に2回転
		preloader: 15,	// Loading 状況のバーの高さ（px）
		cw: true,	// false: →ドラッグで順方向、true: ←ドラッグで順方向
	'':''});
</script>
   <!--※画像のIMG要素のID、フレーム数（画像の枚数）、連番の画像のパスの表現、Reelのオプション、Zoomのオプションの順に書きます-->

簡単呼び出しスクリプト "req_reel.js" の設定

Reelの設定をある程度共有して、呼び出しを簡単に行うための、いわゆるラッパー用スクリプトです。
"req_reel.js" を開くと、最初に以下のような設定があるので、好みに合わせて適当に変えてください。
特に jsDir（スクリプトファイルのフォルダ）は必ず確認してください。

// Reel のデフォルトオプション設定
call_reel.defaults = {
	opening: 2.66,	// 開いたときだけアニメーションするなら、その間の秒数
	entry:   0.75,	// "opening"で開いたときの周波数："2"なら1秒間に2回転

//	speed:   0.4,	// 周波数：数字を入れると自動で動く。"2"なら1秒間に2回転
//	delay:   1.0,	// 最初の待ち時間

	preloader: 15,	// Loading 状況のバーの高さ（px）
	cw: true,	// false: →ドラッグで順方向、true: ←ドラッグで順方向
'':''};

// myZoom のデフォルトオプション設定
call_reel.zoom_defaults = {
	def: 1,	// デフォルトのズーム
	max: 3.2,	// ズームの最大値
	min: 1,	// ズームの最小値
'':''};

// スクリプトファイルのフォルダ（例：'http://example.com/js/'）
var jsDir = './';

FireFoxでの画像のチラつきについて

Reel は、画像の切り替わりを１つの <img> 要素の src を変更することによって行っているので、
画像が切り替わる際に一部のブラウザで読み込みの遅延が起こり、 画像が「チラつく」 という現象が発生する場合があります。
主要ブラウザでは FireFox で顕著です。

もし、FireFox のチラつきを防止したい場合は、 簡単呼び出しスクリプト（req_reel.js） を使うか、 通常版の場合は、for_reel_gecko.js を用意しましたので、それを本体（jquery.reel.js）と一緒に読み込ませてみてください。

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="./jquery.reel.js"></script>
<script type="text/javascript" src="./for_reel_gecko.js"></script>

※これでやってることは、画像の背景にその画像と同じ画像を読み込ませることで、 画像が切り替わるときに、前の画像と新しい画像を同時に二枚表示させておく、というものです。
　つまり、差があまりない画像を表示させることによる目の錯覚を利用した対策です。
　やっつけですが、よかったらお使いください。

Options - Reel のオプション（公式ページより）

Reel has a handful of options you can use to override the default values.

See the fully annotated source code for more details on options, events and all that jazz.