360度回転画像商品撮影サービス|Product Image

  • 撮影事例
  • 閲覧/導入方法
  • 撮影事例
  • 閲覧/導入方法

閲覧/導入方法

360度回転画像をお客様の環境でご利用いただくことができるか、サンプルデータでお試しください。
サンプルデータ.zip
File Size: 30556 kb
File Type: zip
ファイルのダウンロード

種類:圧縮(zip形式)フォルダ
サイズ:29.1MB
・閲覧方法
圧縮フォルダを解凍後、フォルダごとデスクトップに移動し、Internet Explorerで「HTML5Viewer.html」を開いてください。
※1.実際にWEBサイトに導入される際には、Internet Explorer、Google Chromeのどちらでもご利用いただけます。
※2.ダウンロードしたサンプルデータには有効期限はございません。
画像
・導入方法
ファイル形式:HTML5
埋め込み方法:iframe/JavaScript
<ファイル構造>
Images フォルダ​
  :
撮影画像を保管
Programs フォルダ
  :CSS、JavaScriptコードを保管
Profiles フォルダ
  :ボタン画像やコンテンツの設定をファイルを保管
​HTML5Viewer.html
  :再生する際に実際に開くファイル
画像
・導入手順
「iframe」と「JavaScript」の2種類の方法で導入することが可能です。
<1.埋め込み方法>
​iframe 
で外部からリンク
別URLに用意した360回転画像のページを
<iframe>タグを使って実際に表示する方法です。
​ページの枠内にリンクして表示します。
<メリット>
​必要最低限のウェブ知識で簡単に導入が可能です。
また回転ビューを単体で再生できます。
楽天市場 のPCサイトでも使用可能です。
<デメリット>
​掲載するウェブサイトでiframe を
​使えないと導入できません。
​​
​
<埋め込みコード例>
​<iframe  src=“http://my360.com/sample/HTML5Viewer.html  ” width=“500” height=“500”></iframe>
sampleという名前の360度回転画像を
縦横500px枠に導入する例です。

幅と高さを任意の値で指定可能です。
<2.埋め込み方法>
​JavaScript 
を直接埋め込む
360度回転画像のページの JavaScript コードや
各種ファイルへのリンクを実際に表示するページに
​直接コピー&ペーストして表示する方法です。
<メリット>
​ファイル別に保存場所を分けるなど
カスタマイズが可能です。
360度回転画像の挙動を細かく制御することができます。
<デメリット>
​ファイル構造やJavaScriptのウェブ知識が必要です。
また掲載するウェブサイトでJavaScript が
​使えないと導入できません。
回転画像単体では再生できません。
<埋め込みコード例>
<div id="Frame" style="position:relative; width: 800px; height: 800px; top: 0px; left:  0px;"></div>
<script type="text/javascript" src="./Programs/HTML5/jQuery.js"></script>
<script type=“text/javascript” src=“./Programs/HTML5/HTML5Loader.js"  id="animateScript"></script>
<script type="text/javascript">
jQuery(function ($) {
$('#Frame').animate3D({  autoAllocation: true,
pathProfiles: ‘./Profiles/Profile.xml'
});
});
</script>
上記コードを実際に表示するページにコピー&ペースト
値やURLを適宜変更することができます。
商品撮影を申込
利用規約
​​プライバシーポリシー
特定商取引法に基づく表示
​Product Image Co., Ltd.