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

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

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

標準埋め込みコード

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" src="//orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/script?width=auto&content2=yes&height=auto"></script>
    <div class="orbitvu-viewer" style="width: 250px; height: 250px">
        <div id="ovContent-dSz54kMJ7rHKtC6E2YBHpf" class="orbitvu-container" style="background: url(//static.orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/iproc/250/250/img01.png) no-repeat center center #ffffff;"></div>
    </div>
    // YOUR SITE CODE HERE
</body>
</html>

QR コード

<a href="https://orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/view" target="_blank">
    <img src="//orbitvu.co/imageprocessor/qrcode_proccessor?content=aHR0cDovL29yYml0dnUuY28vMDAxL2RTejU0a01KN3JIS3RDNkUyWUJIcGYvb3YzNjAxLzIvdmlldw==">
</a>

画像 (回転する)

<img src="//cdn.orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/iproc/md_1530858896/img01?max_width=200&height=179&rotate=45" alt="" />

最大スケール

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


<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" src="//orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/script?width=auto&content2=yes&height=auto&max_scale=0.15&viewer_uid=xl2&force_html5=yes"></script>
    <div class="orbitvu-viewer" style="border:1px solid #444444; width: 100%; height: 250px">
        <div id="ovContent-xl2" class="orbitvu-container" style="background: url(//static.orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/iproc/250/250/img01.png) no-repeat center center #ffffff;"></div>
    </div>
    // YOUR SITE CODE HERE
</body>
</html>

HTML5 初期情報

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

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" src="//orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/script?width=auto&content2=yes&height=auto&viewer_uid=xl3_2&html5_inital_info=all"></script>
    <div class="orbitvu-viewer" style="border: 1px solid #444444; width: 100%; height: 250px">
        <div id="ovContent-xl3_2" class="orbitvu-container" style="background: url(//static.orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/iproc/250/250/img01.png) no-repeat center center #ffffff;"></div>
    </div>
    // YOUR SITE CODE HERE
</body>
</html>

HTML5 ヒント

 html5_hint を使用して、infographic を表示

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" src="//orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/script?width=auto&content2=yes&height=auto&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" class="orbitvu-container" style="background: url(//static.orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/iproc/250/250/img01.png) no-repeat center center #ffffff;"></div>
    </div>
    // YOUR SITE CODE HERE
</body>
</html>

実行の遅延

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

<!DOCTYPE html>
<html>
<body>
    // YOUR SITE CODE HERE
    <script type="text/javascript" src="//orbitvu.co/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/script?width=auto&content2=yes&height=auto&viewer_delayed=yes&viewer_uid=xl4"></script>
    <div class="orbitvu-viewer" style="border: 1px solid #444444; width: 100%; height: 250px">
        <div id="ovContent-xl4" class="orbitvu-container"></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/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/script?width=auto&content2=yes&height=auto"></script>
     // YOUR SITE CODE HERE
</body>
</html>

Switch to second tab to see 360° view

非表示コンテナ内の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/001/dSz54kMJ7rHKtC6E2YBHpf/2/orbittour/468/script?force_html5=yes"></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/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/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/001/dSz54kMJ7rHKtC6E2YBHpf/ov3601/3/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>