Dokumentacja Orbitvu

Osadzanie za pomocą embed codes z ORBITVU SUN

ORBITVU SUN to platforma, która pozwala bez wysiłku zarządzać prezentacjami ORBITVU, ponownie ich używać i je rozpowszechniać. Potrzebne parametry ustawisz w jej interfejsie, a gotowy embed code wystarczy wkleić do witryny.

ORBITVU SUN to platforma, która pozwala bez wysiłku zarządzać prezentacjami ORBITVU, ponownie ich używać i je rozpowszechniać. Potrzebne parametry ustawisz w jej interfejsie, a gotowy embed code wystarczy skopiować i wkleić do swojej witryny.

Jeśli potrzebujesz dalszych korekt, możesz je wprowadzić, zmieniając wartości parametrów. Poniżej znajdziesz typowe embed codes generowane przez ORBITVU SUN

Standardowy embed code

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

Kod QR

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

Zdjęcie (obrócone)

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

Max scale

Tutaj dodajemy max_scale, aby ograniczyć maksymalny zoom, oraz viewer_uid, aby móc użyć tej samej prezentacji kilka razy na jednej stronie. Porównaj, jak bardzo możesz tu przybliżyć obraz, z pierwszym przykładem na tej stronie.

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

Użycie html5_initial_info do wyświetlenia okna informacyjnego.

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

Użycie html5_hint do wyświetlenia infografiki.

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

Opóźnione uruchomienie

Wstrzyknięcie prezentacji na stronę możesz odroczyć parametrem viewer_delayed. Możesz na przykład chcieć pokazać prezentację po kliknięciu przycisku (wymaga to pewnej wiedzy programistycznej).

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

Responsywny VIEWER w ukrytej zakładce

Czasem możesz chcieć umieścić ORBITVU VIEWER w osobnej zakładce, która początkowo jest ukryta, i nadal oczekiwać, że VIEWER będzie skalował się responsywnie. Od wersji 3.0.32 ORBITVU VIEWER obsługuje taką sytuację automatycznie i odracza inicjalizację do momentu, w którym zostanie wyświetlony.

 <!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>
Przejdź do drugiej zakładki, aby zobaczyć widok 360°

ORBITTOUR w ukrytym kontenerze

Jeśli musisz zainicjować ORBITTOUR w ukrytym kontenerze, który zostanie wyświetlony dynamicznie później (np. po kliknięciu przycisku), zrób to w zwykły sposób. ORBITTOUR dynamicznie wykryje moment wyświetlenia i prawidłowo 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/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>

Układ responsywny

ORBITVU VIEWER można stosować w układach responsywnych, ustawiając width i height na auto. ORBITVU VIEWER dopasuje się wtedy do elementu kontenera.

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

Element kontenera z wysokością ustawianą przez 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/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>

Korzystanie w trybie offline z urządzeniem iPad

Aby zainstalować prezentację Orbitvu (360°/3D) na iPadzie do użytku offline, skorzystamy z aplikacji Goodreader, którą można pobrać bezpośrednio z App Store.

Własny interfejs VIEWER-a z użyciem API – samouczek

Orbitvu VIEWER (wersje SUN, Free i Infinity360) udostępnia API, które pozwala dostosować interfejs VIEWER-a. W tym samouczku zaimplementujemy od nowa przyciski VIEWER-a.

Na tej stronie

Standardowy embed codeKod QRZdjęcie (obrócone)Max scaleHTML5 initial infoHTML5 hintOpóźnione uruchomienieResponsywny VIEWER w ukrytej zakładceORBITTOUR w ukrytym kontenerzeUkład responsywny