商品画像をいろんな角度から見せたいけど、3DCGを使ってあらゆる角度を自由に見せるまでは必要はない、、、そんな時に使えるかも？なjQuery Pluginをご紹介します。
これらのプラグインはぱらぱら漫画の要領で、複数の画像を高速に切り替えることで動いているような、回転しているような見せ方が可能になります。
SpriteSpin
最初にご紹介するのは３つの描画方法が用意されているプラグインSpriteSpinです。
jQuery-1.4.2 以降に依存するプラグインで、MIT ライセンスのもとで公開されています。
対応ブラウザは各種PC用ブラウザ（IE6以降）とモバイル用ブラウザがサポートされています。
（非minifyのspritespin.js：26.5KB）
<!-- 画像を表示するHTML --><div id="spritespin"></div> <!-- JS --><script type="text/javascript">$(function(){$("#spritespin").spritespin(({width : 480,height : 327,frames : 34,framesX : 6,//スプライトシート利用時の列数behavior : "drag",module : "360",sense : -1, //ドラッグ時の回転方向source : "シーケンス画像パスの配列 or スプライトシート画像パス",animate : true, //アニメーションで回転させるかloop : true, //アニメーションをループさせるかframeWrap : true, //無限に回転するかframeStep : 1, //アニメーション時のフレーム間隔frameTime : 60, //アニメーション時のフレーム更新の時間間隔enableCanvas : true //Canvasタグで表示するか否か});});</script> |
特徴
- 描画方法が３種類用意されている
- 操作方法が４種類用意されている
- Canvasが利用できる
様々なOptitonが用意されていますが、この中のmoduleとbehaviorについてご紹介します。
moduleでは「360」「panorama」「gallery」の３つの画像描画方法を用意されています。
- 「360」は360度回転表示されるモジュール
- 「panorama」はパノラマ撮影された風景などを表示するのに適したモジュール
- 「gallery」は画像スライドショーの表示に適したモジュール
Behaviorsでは「Drag」「Hold」「Click」「Swipe」の４つの画像操作方法が用意されています。
- 「Drag」はドラッグ操作で画像回転などが可能。主に「360」「panorama」表示時に適しています
- 「Hold」はマウスダウン中（ホールド）に画像回転などが可能
- 「Click」はクリック操作で画像切替などが可能。「gallery」表示時に適しています
- 「Swipe」はモバイル端末でのスワイプ操作で画像切替などが可能。「gallery」表示時に適しています
上記のmodule/Behaviorsはカスタマイズが可能で、独自の描画方法や操作方法を作って指定することもできます。詳しくはCustomizationsのページにサンプルが記述されています。その他制御用の関数もいくつか用意されており、動的なオプションの変更やフレーム操作も可能なようです。
公式サンプル
THREESIXTY SLIDER
2番目にご紹介するのは慣性スクロールが可能なプラグインTHREESIXTY SLIDERです。
MIT & GPLライセンスのもとで公開されているプラグインで、明確なバージョン記載は見当たりませんでしたが、jQuery-1.8.3 以降では動作するようです。公式ページには対応ブラウザは各種PC用ブラウザ（IE6以降）のみ明記されてますが、タッチ操作も対応しているようです。
（threesixty.min.js：5.45KB）
<!-- 画像を表示するHTML --><section class="container-fluid" id="container"><div class="threesixty product1"><div class="spinner"><span>0%</span></div><ol class="threesixty_images"></ol></div></section> <!-- JS --><script type="text/javascript">window.onload = init;function init(){$('.product1').ThreeSixty({totalFrames: 72, // フレーム数endFrame: 72, // 最終フレーム番号currentFrame: 1, // スタート時のフレーム番号imgList: '.threesixty_images', // 画像表示場所のセレクタprogress: '.spinner', // プログレス表示場所のセレクタimagePath:'assets/product1/', // 画像フォルダパスfilePrefix: 'ipod-', // ファイルプレフィックスext: '.jpg', // 画像ファイル拡張子height: 265,width: 400,navigation: true, //previous,play,nextのナビゲーション表示有無});}</script> |
特徴
- 3つの中では最軽量
- フルスクリーン表示プラグイン同梱
SpriteSpinとの違いはスプライトシートがサポートされていない替わりに、THREESIXTY SLIDERには「threesixty.fullscreen.js」といったフルスクリーン表示用プラグインも同梱されていたり、ウィンドウサイズに応じて画像サイズも変わるレスポンシブル対応設定も可能です。ドラッグ操作で360度ぐるぐる回したいだけ、であればTHREESIXTY SLIDERでよいかも知れませんね。各種Configや関数、サンプルの類はコチラのgithubページに掲載されています。
reel
最後にご紹介するのは３つの中では一番高機能なプラグインreelです。
jQuery-1.6.2 以降に依存するプラグインで、MIT ライセンスのもとで公開されています。
対応ブラウザは各種PC用ブラウザ（IE6以降）とモバイル用ブラウザがサポートされています。
（jquery.reel-min.js：20.3KB）
<!-- HTMLタグのみで実装する場合 --><img src="f1.jpg" width="276" height="126"class="reel"id="image"data-image="f1-reel.jpg"data-frames="35"data-footage="6"> <!-- HTML＋JS --><img id="image" src="f1.jpg" width="276" height="126" /><script>$('#image').reel({image: 'f1-reel.jpg',frames: 35,footage: 6});</script> |
特徴
- 豊富なオプション
- 縦・横のマルチスクロールが可能
- ジャイロスコープ対応
reelはSpriteSpinと同様に、シーケンス（連番）画像とスプライトシート（連番画像を１つにまとめた）画像の双方に対応し、パノラマ表現も可能です。一番の特色だと感じたのは、横方向のスクロールだけでなく縦方向の回転も可能な点です。これにより表示できるアングルが倍増しますが、その分の画像素材を用意するのも大変ですし、ダウンロードする画像容量も増えるので、使い方は慎重に検討したほうがよさそうです。
v1.3の新機能としてジャイロスコープを利用して回転を制御できる機能も追加されたようで、これからの新機能にも期待できそうです。
まとめ
今回は360度ぐるぐる回すためのプラグインを３つご紹介しました。
単純に360度ドラッグ操作でまわすだけなら、軽量なTHREESIXTY SLIDERが良いかなと感じました。どのプラグインを利用するにしても画像素材がメインのコンテンツとなるので、サイズや容量は出来るだけ小さくまとめる必要があります。折角360度コンテンツを用意しても、画像読込に時間が掛かるとユーザはすぐにページから離れてしまうので、気をつけたいところです。
