Hostowanie prezentacji 360° na własnym serwerze

Aby hostować prezentacje na własnym serwerze, potrzebujesz dostępu do serwera, własnej kopii ORBITVU VIEWER, prezentacji 360° oraz podstawowej wiedzy technicznej.

Aby hostować prezentacje na własnym serwerze, potrzebujesz:

dostępu do serwera (kopiowanie plików i konfiguracja serwera HTTP)
własnej kopii ORBITVU VIEWER (musisz kupić licencję lub skorzystać z ORBITVU VIEWER Free360)
prezentacji 360°
podstawowej wiedzy technicznej na temat HTML i administracji serwerem
zrozumienia, czym jest prezentacja Orbitvu i czym jest ORBITVU VIEWER.

Wdrożenie

VIEWER
- Skopiuj ORBITVU VIEWER na swój serwer (skopiuj folder orbitvu12/)
- Skonfiguruj serwer WWW tak, aby udostępniał pliki z katalogu orbitvu12/ (upewnij się, że są publicznie dostępne pod jakimś adresem URL, np.: http://yourdomain.com/orbitvu12/)
Prezentacje
- Skopiuj prezentacje na swój serwer (zwykle użyjesz do tego klienta FTP)
- Skonfiguruj serwer WWW tak, aby udostępniał pliki prezentacji pod publicznie dostępnymi adresami URL, np.: http://yourdomain.com/presentations/
Konfiguracja serwera
- Dodaj nagłówek Access-Control-Allow-Origin *; zarówno do adresów URL VIEWER-a, jak i prezentacji, aby uniknąć ewentualnych problemów z CORS (Cross-origin resource sharing)
Kod
- Utwórz strony internetowe korzystające z adresów URL Twojego ORBITVU VIEWER i Twoich prezentacji (szczegóły poniżej)

Warto również uzyskać i skonfigurować certyfikat SSL dla swojej domeny — jest wymagany np. przy integracji z Facebookiem.

Ta strona opisuje klasyczny bundle skryptowy. Jeśli Twoja witryna jest budowana bundlerem (Vite, webpack, Next.js, …), użyj zamiast niego bundle'a ES module — ten sam folder orbitvu12/ zawiera również orbitvu.esm.js.

Załaduj skrypty pomocnicze ORBITVU VIEWER Skrypty możesz dodać w sekcji <head> strony.

<script type="text/javascript" src="http://yourdomain.com/orbitvu12/orbitvu.js"></script>

Utwórz element kontenera dla prezentacji Utwórz element kontenera, do którego zostanie wstawiona prezentacja. Trzeba nadać temu kontenerowi unikalne id.

<div id="presentation1-container"></div>

Jeśli chcesz umieścić na stronie kilka prezentacji, po prostu utwórz kontener z unikalnym id dla każdej z nich

Zainicjuj prezentację Ostatnim krokiem jest wywołanie funkcji JavaScript inject_orbitvu, która wstrzyknie prezentację do kontenera.

<script type="text/javascript">
    inject_orbitvu(
        'presentation1-container',
        'http://yourdomain.com/orbitvu12/',
        '',
        {
            ovus_folder: "http://yourdomain.com/presentations/presentation1/",
            content2: 'yes',
            width: "500",
            height: "400"
        });
</script>

Wiersz 3:

id elementu kontenera

Wiersz 4:

Adres URL folderu ORBITVU VIEWER (hostowanego na Twoim serwerze). ORBITVU VIEWER ładuje z tego folderu swój arkusz stylów viewer5.css, więc wskaż katalog zawierający orbitvu.js i zostaw ukośnik na końcu.

Wiersz 5:

Nieużywany — pozostałość po starszych wersjach VIEWER-a, zachowana po to, by parametry pozostały na czwartej pozycji. Zostaw pusty ciąg znaków.

Wiersz 7:

Adres URL katalogu z prezentacją (hostowanego na Twoim serwerze)

Wiersz 8:

Ustaw na yes, jeśli w katalogu prezentacji znajduje się plik content2.xml; w przeciwnym razie ustaw na no lub usuń

Wiersze 9-10:

Pozostałe parametry ORBITVU VIEWER. Więcej informacji znajdziesz w liście parametrów.

Skrypt pomocniczy musi zostać załadowany PRZED wywołaniem inject_orbitvu

Folder VIEWER-a z wiersza 4 jest tym, z którego ORBITVU VIEWER ładuje viewer5.css. Jeśli podasz tam pusty ciąg znaków, ustaw samodzielnie viewer_base albo podlinkuj arkusz stylów ze swojej strony — inaczej prezentacja wyświetli się bez stylów.

Jeśli masz na stronie kilka prezentacji, musisz wywołać inject_orbitvu dla każdej z nich

Wywołanie inject_orbitvu warto umieścić w procedurze obsługi zdarzenia onready

Kompletny przykład

Przykład używa jQuery do odroczenia wykonania kodu JavaScript po załadowaniu strony

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />

        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="http://yourdomain.com/orbitvu12/orbitvu.js"></script>

        <script type="text/javascript">
            $(function() {
                inject_orbitvu(
                  'presentation1-container',
                  'http://yourdomain.com/orbitvu12/',
                  '',
                  {
                      ovus_folder: "http://yourdomain.com/presentations/presentation1/",
                      content2: "yes",
                      width: "500",
                      height: "400"
                  });
            });
        </script>
    </head>
    <body>
        <h1>Some text</h1>

        <div id="presentation1-container"></div>
    </body>
</html>

Zadbaj o ustawienie prawidłowego DOCTYPE na swojej stronie, szczególnie ze względu na Internet Explorer

Hostowanie prezentacji 360° na własnym serwerze

Wdrożenie

Kod strony internetowej

Kompletny przykład

Na tej stronie