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

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 wieluparametró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" 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>

Obraz (obrót)

<img src="//cdn.orbitvu.co/share/dSz54kMJ7rHKtC6E2YBHpf/still/view?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" 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 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" 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 infografik.

<!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óź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" 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

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/share/dSz54kMJ7rHKtC6E2YBHpf/47746/360/script?width=auto&content2=yes&height=auto&viewer_uid=xl7"></script>
     // YOUR SITE CODE HERE
</body>
</html>

Przełącz na drugą zakładkę, aby zobaczyć widok 360°

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

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/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ą 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/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>

On this page