ORBITVU SUN 埋め込みコードの使用

さらに調整が必要な場合は、パラメータ値を微調整することによって対応できます。 ORBITVU SUNによって生成される典型的な埋め込みコードを以下に示します。

ORBITVU SUNは、ORBITVUプレゼンテーションを簡単に管理、再利用、再配布できるプラットフォームです。インターフェイスから必要なパラメータ（parameter values）を設定し、必要な埋め込みコードをコピー＆ペーストしてサイトに貼り付けるだけです。

標準埋め込みコード

<!DOCTYPE html>
<html>
<body>
// YOUR SITE CODE HERE
<script type="text/javascript" async src="//orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/47746/360/script?width=auto&height=auto&content2=yes&partial_load=yes"></script>
<div class="orbitvu-viewer" style="width: 350px;height: 300px;">
    <div id="ovContent-dSz54kMJ7rHKtC6E2YBHpf" style="background: url(//cdn.orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/still/view?md=1530858896&height=300&max_width=350) no-repeat center center transparent;width: 350px;height: 300px;"></div>
</div>
// YOUR SITE CODE HERE
</body>
</html>

QR コード

<a href="https://orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/47746/360/view" target="_blank">
  <img src="//orbitvu.co/imageprocessor/qrcode_proccessor?content=aHR0cHM6Ly9vcmJpdHZ1LmNvL3NoYXJlL2RTejU0a01KN3JIS3RDNkUyWUJIcGYvNDc3NDYvMzYwL3ZpZXc=">
</a>

画像 (回転する)

<img src="//cdn.orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/still/view?width=200&height=179&rotate=45" alt="" />

最大スケール

ここでは max_scale を追加して最大ズームを制限し、viewer_uid を使用して同じプレゼンテーションを１ページで複数回使用することができます。このページの最初の例で、どれくらいズームできるか比較してみてください。

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" async src="//orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/47746/360/script?width=auto&height=auto&content2=yes&partial_load=yes&max_scale=0.15&viewer_uid=xl2"></script>
    <div class="orbitvu-viewer" style="border:1px solid #444444; width: 100%; height: 250px;">
        <div id="ovContent-xl2" style="background: url(//cdn.orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/still/view?md=1530858896&height=250&max_width=250) no-repeat center center transparent;width: 250px;height: 250px;"></div>
    </div>  
    // YOUR SITE CODE HERE
</body>
</html>

HTML5 初期情報

html5_initial_info を使用して、情報ウィンドウを表示

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" async src="//orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/47746/360/script?width=auto&height=auto&content2=yes&partial_load=yes&viewer_uid=xl3_2&html5_initial_info=all"></script>
    <div class="orbitvu-viewer" style="border:1px solid #444444; width: 100%; height: 250px;">
        <div id="ovContent-xl3_2" style="background: url(//cdn.orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/still/view?md=1530858896&height=250&max_width=250) no-repeat center center transparent;width: 250px;height: 250px;"></div>
    </div>  
    // YOUR SITE CODE HERE
</body>
</html>

HTML5 ヒント

/viewer/orbitvu-viewer-parameters-reference#force_html5 html5_hint を使用して、infographic を表示

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE  
    <script type="text/javascript" async src="//orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/47746/360/script?width=auto&height=auto&content2=yes&partial_load=yes&viewer_uid=xl3_3&html5_hint=yes"></script>
    <div class="orbitvu-viewer" style="border:1px solid #444444; width: 100%; height: 250px;">
        <div id="ovContent-xl3_3" style="background: url(//cdn.orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/still/view?md=1530858896&height=250&max_width=250) no-repeat center center transparent;width: 250px;height: 250px;"></div>
    </div>  
    // YOUR SITE CODE HERE
</body>
</html>

実行の遅延

viewer_delayed パラメータを使用して、プレゼンテーションのページ反映を遅延させることができます。たとえば、ボタンのクリックでプレゼンテーションを表示したい場合など（この設定にはプログラミングに関する知識が必要です）。

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" async src="//orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/47746/360/script?width=auto&height=auto&content2=yes&partial_load=yes&viewer_uid=xl4&viewer_delayed=yes"></script>
    <div class="orbitvu-viewer" style="border:1px solid #444444; width: 100%; height: 250px;">
        <div id="ovContent-xl4"></div>
    </div>  

    <button onclick="inject_viewer_xl4()">Inject presentation</button>
    // YOUR SITE CODE HERE
</body>
</html>

非表示タブのレスポンシブビューア

ORBITVU VIEWERを最初は非表示になっている別のタブに配置し、ORBITV VIEWERがそれに対応して動作するようにしたい場合があります。 ORBITVU VIEWERのバージョン3.0.32以降、このような状況は自動的に処理され、VIEWERは表示されるまで初期化を遅延させます。

 <!DOCTYPE html>
 <html>
 <head>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
     <style type="text/css">
         #tabs-container {
             height: 300px;
         }

         /* make tabs width responsive */
         #tabs {
             width: 200px;
             height: 100%;
             box-sizing: border-box;
         }

         @media (min-width:800px) {
             #tabs {
                 width: 300px;
             }
         }

         @media (min-width:1000px) {
             #tabs {
                 width: 350px;
             }
         }

         @media (min-width:1200px) {
             #tabs {
                 width: 500px;
             }
         }
     </style>
 </head>
 <body>
     // YOUR SITE CODE HERE
     <div id="tabs-container">  <!-- use container to set tabs height -->
         <div id="tabs">
             <ul>
                 <li><a href="#tabs-1">First tab</a></li>
                 <li><a href="#tabs-2">360&deg;</a></li>
             </ul>
             <div id="tabs-1">
                 <p>Switch to second tab to see 360&deg; view</p>
             </div>
             <div id="tabs-2">
                 <div id="ovContent-xl7" class="orbitvu-container"></div>
             </div>
         </div>
     </div>
     <!-- Use jQuery UI tabs plugin -->
     <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
     <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
     <script type="text/javascript">
         // jQuery tabs
         $("#tabs").tabs({
             heightStyle: "fill"
             }
         );
     </script>
     <script type="text/javascript" src="//orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/47746/360/script?width=auto&content2=yes&height=auto&viewer_uid=xl7"></script>
     // YOUR SITE CODE HERE
</body>
</html>

2番目のタブに切り替えると360°表示を確認できます

非表示コンテナ内のORBITTOUR

後で動的に非表示コンテナ内のORBITTOURを初期化する必要がある場合（たとえば、ボタンをクリックしているとき）、ORBITTOURは、表示されたことを動的に検出し、サイズを適切に調整します。別のオプションは、ORBITTOURのディメンションを指定する orbittour_width および orbittour_height パラメータを使用することです。

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <div class="orbitwrapper" style="width: 400px; height: 400px; background-color: #eaeaea; border: 1px solid #888888;">
        <div id="hidden-orbittour-wrapper" style="display: none; height: 100%;">
            <div id="orbittour-dSz54kMJ7rHKtC6E2YBHpf" class="orbittour-container"></div>
            <script type="text/javascript" src="//orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/468/orbittour/script"></script>
        </div>
    </div>
    <button onclick="document.getElementById('hidden-orbittour-wrapper').style.display='block';">Show orbittour</button>
    // YOUR SITE CODE HERE
</body>
</html>

レスポンシブレイアウト

autoに設定された幅(width)と高さ(height)を使用するレスポンシブレイアウトで、ORBITV VIEWERを使用することができます。ORBIT VIEWERはコンテナ要素に適合します。

高さ0pxのコンテナ。 ORBITV VIEWERは16：9の比率で表示されます：

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" src="//orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/47746/360/script?width=auto&content2=yes&height=auto&viewer_uid=xl5"></script>
    <div class="orbitvu-viewer" style="width: 100%; height: 100%">
        <div id="ovContent-xl5" class="orbitvu-container"></div>
    </div>
    // YOUR SITE CODE HERE
</body>
</html>

メディアクエリを使用して高さが設定されたコンテナ要素

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <style type="text/css">
        .media-query-viewer-wrapper {
            height: 100px;
        }

        @media (min-height:200px) {
            .media-query-viewer-wrapper {
                height: 200px;
            }
        }

        @media (min-height:300px) {
            .media-query-viewer-wrapper {
                height: 300px;
            }
        }
    </style>

    <div class="media-query-viewer-wrapper" style="width: 50%;">
        <script type="text/javascript" src="//orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/47746/360/script?width=auto&content2=yes&height=auto&viewer_uid=xl6"></script>
        <div class="orbitvu-viewer" style="width: 100%; height: 100%">
            <div id="ovContent-xl6" class="orbitvu-container"></div>
        </div>
    </div>
    // YOUR SITE CODE HERE
</body>
</html>

ORBITVU SUN 埋め込みコードの使用

On this page