なにこれ
- jQuery Reel Plugin は、いくつかの画像を繋げて見せられるスクリプトです。
- 画像を動画のようにしたり、360度回転させられたり、パノラマ風に見せたりできます。
- ←のサンプルでは、マウスで←→にドラッグすると、10度刻みに360度回転します。
- マウスのホイール↑で拡大、↓で縮小、クリックで移動、にしてみました。(拡張)
ダブルクリックでも拡大、右クリックでも縮小になります。(拡張追加) - たむこれ (Reel導入テスト) - よねぞんさん に付き合って遊んでいるものです。
目次
必要なファイル
※サンプル・ファイル一式: 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、フレーム数(画像の枚数)、連結した画像の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.