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

なにこれ

目次

必要なファイル

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

更新履歴

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

<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、フレーム数(画像の枚数)、連結した画像の1行の枚数、の順に書きます-->

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

<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	// 連結した画像の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.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	// 連結した画像の1行の枚数
	});
});
</script>

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

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

<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 は、画像の切り替わりを1つの <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.

type option default usage
Object annotations undefined NEW Definition object laying out in-picture annotations which are synchronized with the Reel. Consult Annotations in the wiki.
jQuery area undefined Use jQuery to extend the area sensitive to mouse or touch interaction. Will use the area of the image if left undefined .
Object attr {} NEW Initial attribute-value pairs map for the IMG tag. Useful for dynamically setting up image dimensions.
Number brake 0.23 Braking force applied when slowing down the free spinning when dragged or thrown.
Boolean clickfree false Binds to mouse leave/enter events instead of down/up mouse events.
String cursor undefined NEW Mouse cursor overriding the default one. You can use either hand for a grabbing palm of hand or any valid CSS `cursor` value. Reel's cursors are by default served by Reel's CDN .
Boolean cw false If your Reel image motion doesn't follow the mouse when dragged (moves in opposite direction), set this to true to indicate clockwise organization of frames.
Number delay 0 Delay before Reel starts playing by itself (in seconds).
Boolean directional false Two sets of frames are used when true - one set for forward followed by one for backward motion.
Boolean draggable true Allows mouse or finger drag interaction when true (allowed by default).
Number entry undefined Speed of the opening animation in Hz. Defaults to value of speed option.
Number footage 6 Number of frames per line (when horizontal) or per column (when vertical).
Number frame 1 Initial frame. Plugin instance starts with this frame. Frame 1 is the top left corner of the image. Thus loaded with the highest priority (as all frames in the top row not matter if horizontal or vertical).
Number frames 36 Total number of frames.
Function graph undefined Custom graph function.
String hint "" Text hint for hotspot tooltip.
Boolean horizontal true Flow of frames on the sheet. Default is line-by-line rather than column-by-column.
String image undefined Allows to override default sprite resolution based on IMG src filename by passing the path to the image sprite directly.
String images "" NEW Filename string for series of images like `"image_###.jpg"`, where the `#` counter placeholder is replaced with an actual counter numbers. This is much faster than the alternative Array notation.
Array images [] You can also define images as a raw Array to gain complete control.
Number indicator 0 Can display a range progress indicator inside the image. By passing a positive value in pixels a black rectangle marker will stick to the bottom edge of your image. Customize the color by CSS. Its class name is reel-indicator
Boolean inversed false Flags inversed organization of frames in orbital object movie.
String klass "" You can pass your custom CSS class name for the plugin DOM node. It will accompany the fixed reel base class.
Number laziness 6 On "lazy" devices tempo is divided by this divisor for better performance.
Boolean loops true Can be used to suppress default wrap around behavior of the sequence. Use this option when your captured sequence is a incomplete revolution.
String monitor undefined For development you can monitor any stored value in the upper left corner of the viewport by passing its name. Customize it using CSS. Its class name is reel-monitor
Number opening 0 Duration of opening animation (in seconds).
Number orbital 0 View centering tolerance (in frames) for dual-orbit object movies.
String path undefined URL path to be prepended to either image or images filenames.
String preload "fidelity" NEW Preloading mode affecting the order of images loaded. linear gives you loading from number 1 to the last frame, whilst fidelity produces more evenly spread-out order.
Number preloader 4 Size (height) of a image loading indicator (in pixels). Indicator appears along the bottom edge of Reel image when using images sequence. Customize it using CSS. Its class name is reel-preloader
Number rebound 0.5 Time spent on the edge (in seconds) of a non-looping panorama before it bounces back.
Number revolution undefined Distance in pixels the mouse must be dragged to cause one full revolution (when undefined it defaults to double the viewport width or half the stitched option).
Object revolution undefined NEW For multi-row movies you can optionally define individual revolutions for both x and y axis.
Number row 1 Initial row for multi-row setups (see rows for more).
Number rows 0 Number of rows for a multi-row setup (default 0 means single-row setup).
Boolean scrollable true NEW Allows page scroll (allowed by default; applies only to touch devices).
Number spacing 0 Spacing between frames on the sheet (in pixels).
Number speed 0 Animated rotation speed in revolutions per second (Hz). Animation is disabled by default (0).
Number step undefined DEPRECATED Use frame instead.
Number steps undefined DEPRECATED Use frames instead.
Boolean steppable true NEW Allows to step the view (horizontally) by clicking on image.
Number stitched 0 Pixel width of stitched panorama image. If supplied the default frame-by-frame behavior changes to panoramic behavior which works with the classic style panorama.
String suffix "-reel" A portion of the sheet filename inserted right before image type extension. For example, for an image /path/to/image.jpg the sheet will be /path/to/image-reel.jpg by default.
Number tempo 25 Shared animation ticker tempo in ticks per second. Doesn't affect the speed.
Number timeout 2 Idle timeout after which animation is resumed (in seconds).
Boolean throwable true Allows drag & throw interaction (allowed by default).
Number throwable NEW Maximal velocity when thrown.
Number velocity 0 NEW Initial velocity of user interaction; washes off quickly with brake .
Boolean vertical false Switches orbital object movie to vertical mode.
Boolean wheelable true Allows mouse wheel interaction (allowed by default; requires external mouse wheel plugin ).

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