Hostowanie Prezentacji 360° na własnym serwerze

Do hostowania prezentacji na własnym serwerze potrzebujesz:

  • dostęp do serwera (kopiowanie plików i konfiguracja serwera HTTP)
  • własną kopię ORBITVU VIEWER (musisz zakupić licencję lub skorzystać z ORBITVU VIEWER Free360)
  • Prezentacja 360°
  • troche wiedzy technicznej na temat HTML i administracji serwerami
  • musisz zrozumieć czym jest ORBITVU PRESENTATION oraz czym jest ORBITVU VIEWER.

Deployment

  • VIEWER
    • Skopiuj ORBITVU VIEWER na Twój serwer (skopiuj folder orbitvu12/)
    • Skonfiguruj swój serwer WWW tak, aby obsługiwał pliki z folderu orbitvu12/ (upewnij się, że są one publicznie dostępne pod pewnym adresem URL, np.: http://twojadomena.com/orbitvu12/)
  • Prezentacje
    • Skopiuj Prezentacje na swój serwer (zwykle będziesz używać klienta FTP)
    • Skonfiguruj swój serwer WWW tak, aby obsługiwał pliki prezentacji pod niektórymi publicznie dostępnymi adresami URL, np.: http://twojadomena.com/presentations/
  • Konfiguracja serwera
    • Dodaj nagłówek Access-Control-Allow-Origin*; zarówno do adresu URL VIEWER jak i URL Prezentacji aby uniknąć potencjalnych problemów z CORS (Cross-origin resource sharing)
    • Dodaj crossdomain.xml do domeny używanej do obsługi plików prezentacji w celu uniknięcia problemów z bezpieczeństwem Flash, np.: https://mydomain.com/crossdomain.xml
  • Kodowanie
    • Utwórz strony internetowe, które wykorzystają Twoj ORBITVU VIEWER i Twoje adresy URL prezentacji (szczegóły poniżej).

Możesz również uzyskać i skonfigurować certyfikat SSL dla swojej domeny, który jest wymagany. np. jesli będziesz chciał dodać integrację z Facebookiem.

Kodowanie stron internetowych

  • Wczytaj skrypty pomocnicze ORBITVU VIEWER
    Możesz dodać skrypty do sekcji<head> na stronie.
<script type="text/javascript" src="http://yourdomain.com/orbitvu12/orbitvu.js"></script>
  • Utwórz element kontenera do prezentacji
    Utwórz element kontenera, do którego zostanie wstrzyknięta Twoja prezentacja. Konieczne jest ustawienie unikalnego identyfikatora dla tego kontenera.
<div id="presentation1-container"></div>

Jeśli chcesz mieć wiele prezentacji na swojej stronie, po prostu utwórz kontener z unikalnym identyfikatorem dla każdej z nich.

  • Wstrzyknięcie prezentacji
    Ostatnim krokiem jest wywołanie funkcji JavaScript inject_orbitvu, która wstrzykuje prezentację do kontenera.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<script type="text/javascript">
    inject_orbitvu(
        'presentation1-container',
        'http://yourdomain.com/orbitvu12/orbitvuer12.swf',
        'http://yourdomain.com/orbitvu12/expressInstall.swf',
        {
            ovus_folder: "http://yourdomain.com/presentations/presentation1/",
            content2: 'yes',
            width: "500",
            height: "400"
        });
</script>

Linia 3:

id elementu kontenera

Linie 4-5:

URL do plików ORBITVU VIEWER (hostowanych na Twoim serwerze)

Linia 7:

URL do katalogu prezentacji (hostowanego na Twoim serwerze)

Linia 8:

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

Linie 9-10:

Inne parametry ORBITVU VIEWER. Więcej informacji na ten temat można znaleźć w częsci lista parametrów.

Skrypt pomocniczy musi być załadowany PRZED wywołaniem inject_orbitvu.

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

Możesz wywołać inject_orbitv wewnątrz obsługi zdarzenia onready. 

Kompletny przykład

Przykład wykorzystuje jQuery do odroczenia wykonania JavaScript do czasu załadowania 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/orbitvuer12.swf',
                  'http://yourdomain.com/orbitvu12/expressInstall.swf',
                  {
                      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 odpowiedniego DOCTYPE dla Twojej strony, zwłaszcza dla przeglądarki Internet Explorer