閲覧/導入方法
360度回転画像をお客様の環境でご利用いただくことができるか、サンプルデータでお試しください。

サンプルデータ.zip |
種類:圧縮(zip形式)フォルダ
サイズ:29.1MB
サイズ:29.1MB
サンプルデータ.zip | |
File Size: | 30556 kb |
File Type: | zip |
<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.
|