Osadzanie z kodami ORBITVU SUN

ORBITVU SUN to platforma, która umożliwia łatwe zarządzanie, ponowne wykorzystanie i redystrybucję prezentacji ORBITVU. Możesz ustawić niezbędne parametry prezentacji z poziomu interfejsu SUN i po prostu skopiować i wkleić kod osadzający na swojej stronie.

W przypadku konieczności dalszego dostosowania prezentacji, możesz skorzystać z wielu parametrów. Poniżej znajdziesz kilka typowych kodów osadzających generowanych dla Ciebie przez ORBITVU SUN.

Standardowy kod osadzający

<!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>

Kod QR

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

Obraz (obrót)

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

Maksymalna skala

Tutaj dodajemy max_scale w celu ograniczenia maksymalnego możliwego powiększenia i viewer_uid aby umożliwić wielokrotne użycie tej samej prezentacji. Porównaj o ile można teraz powiększyć prezentację w stosunku do pierwszego przykładu na tej stronie.

<!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 informacja początkowa

Użyj html5_initial_info aby wyświetlić okno informacyjne.

<!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 hint

Użycie html5_hint do wyświetlenia infografik.

<!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>

Opóźnienie wykonania

Za pomocą parametru viewer_delayed można odroczyć wstrzyknięcie prezentacji na stronę. Na przykład, możesz chcieć pokazać prezentacje po kliknięciu przycisku (uwaga, wymaga to pewnej wiedzy programistycznej).

<!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>

Responsywny VIEWER w ukrytej zakładce

Czasami możesz chcieć umieścić ORBITVU VIEWER w osobnej zakładce, która jest początkowo ukryta i nadal chcesz, aby ORBITVU VIEWER skalował się responsywnie. Począwszy od wersji ORBITVU VIEWER 3.0.32 taka sytuacja będzie obsługiwana automatycznie i VIEWER opóźni swoją inicjalizację do momentu wyświetlenia prezentacji.

 <!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 w ukrytym kontenerze

Jeśli chcesz zainicjować ORBITTOUR w ukrytym kontenerze, który będzie pokazywany dynamicznie w późniejszym czasie (np. po kliknięciu przycisku), to robisz to jak zwykle. ORBITTOUR wykryje dynamicznie, kiedy jest pokazywany i odpowiednio dostosuje swój rozmiar. Inną opcją jest użycie parametrów orbittour_width i orbittour_height, które wymuszą wymiary ORBITTOUR.

<!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>

Układ responsywny

Możliwe jest użycie ORBITVU VIEWER w responsywnych układach z wykorzystaniem szerokości i wysokości ustawionej automatycznie. ORBITVU VIEWER dopasuje się do rozmiaru elementu zawierającego.

Kontener o wysokości 0px. ORBITVU VIEWER zostanie pokazany w proporcji 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>

Element kontenera z wysokością ustawioną przy użyciu Media queries:

<!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>