360°VIEWについて

360°VIEWというと、GoogleMapのストリートビューなどで使われているパノラマ写真による360°VIEWを思い浮かべる方が多いかもしれません。
今回の360°VIEWは靴などの単体商品を全方位から見ることを目的としています。
そこで色々と検索をしてみたのですがちょうど良いjqueryプラグインが見つかりませんでした。
同じような機能を有するプラグインは確かに存在していましたが、IEでうまく動作しなかったり、動作が重かったりと目的に合ったものを探すことはできず、仕方なく作成しました。

今回作成したものは、レスポンシブ対応でdrag（ドラッグ）及びtouchmove（タッチムーブ）イベントに対応しています。
現在横方向のみに対応しておりますが、時間があれば上下左右に動くようにしたいと考えております。

必要であれば下記からダウンロードしてください。
また、もし上下にも動くものが必要であればご連絡ください。
すでに作成済みであればそのままお渡しいたしますし、未作成でなければご依頼いただければ作成いたします。

360°VIEW

仕様について

画像ファイル名
  • 「image##.jpg」などとし「##」に1から連番でファイル名を定義してください。
アイコン等について
  • 「view360.css」で指定してありますので、適時変更していただければと思います。
サンプルコードについて
  • <link rel='stylesheet' href="./view360.css" type='text/css' media='all' />
<script type='text/javascript' src="./view360.js"></script>
<img src="./capt_001.jpg" data-view360="true" data-frames="31" data-regexp="./capt_###.jpg" alt="">

    「data-view360="true"」でview360コンテンツであることを定義します。
    「data-frames="31"」で画像の枚数を設定します。
    「data-regexp="./capt_###.jpg"」で連番となる部分を指定します。