閲覧/導入方法

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を適宜変更することができます。