Spin

Visualizzatore 360 gradi è un visualizzatore di immagini che fornisce una visualizzazione a 360 gradi dell'immagine o anche una visualizzazione multidimensionale se viene utilizzato un set 360 gradi appropriato. Dispone di strumenti di zoom e rotazione, supporto per schermo intero e un pulsante di chiusura opzionale. È progettato per funzionare su desktop e dispositivi mobili.

NOTA

Le immagini che utilizzano IR (Image Rendering) o UGC (User-Generated Content) non sono supportate da questo visualizzatore.

Visualizzatore di tipo 503.

Consulta Requisiti di sistema e prerequisiti.

URL demo

https://s7d9.scene7.com/s7viewers/html5/SpinViewer.html?asset=Scene7SharedAssets/SpinSet_Sample&stagesize=500,400

Utilizzo del Visualizzatore 360 gradi

Il visualizzatore 360 gradi rappresenta un file JavaScript principale e un set di file di supporto (un singolo JavaScript include con tutti i componenti SDK del visualizzatore utilizzati da questo particolare visualizzatore, risorse e CSS) scaricati dal visualizzatore in fase di esecuzione.

Il visualizzatore 360 gradi può essere utilizzato sia in modalità pop-up utilizzando una pagina HTML pronta per la produzione fornita con IS-Viewers che in modalità incorporata, dove viene integrato nella pagina web di destinazione utilizzando l’API documentata.

La configurazione e l’interfaccia sono simili a quelle degli altri visualizzatori. Tutte le operazioni di skin possono essere eseguite tramite CSS personalizzato.

Consulta Riferimento comando comune a tutti i visualizzatori - Attributi di configurazione e Riferimento comando comune a tutti i visualizzatori - URL

Interazione con il visualizzatore 360 gradi

Il visualizzatore 360 gradi supporta i seguenti gesti touch comuni in altre applicazioni mobili. Quando il visualizzatore non è in grado di elaborare il gesto di scorrimento di un utente, inoltra l’evento al browser web per eseguire uno scorrimento nativo della pagina. Questa funzionalità consente all’utente di spostarsi all’interno della pagina anche se il visualizzatore occupa la maggior parte dell’area dello schermo del dispositivo.

Gesto

Descrizione

Doppio tocco

Esegue lo zoom di un livello fino al raggiungimento dell'ingrandimento massimo. Il doppio tocco successivo ripristina lo stato di visualizzazione iniziale del visualizzatore.

Pizzicare

Ingrandisce o riduce l'immagine.

Scorrimento orizzontale

Se l'immagine è in stato di ripristino, ruota orizzontalmente lungo il set.

Se l'immagine è ingrandita, l'immagine viene spostata orizzontalmente. Se l'immagine viene spostata sul bordo della vista e viene ancora eseguito un passaggio di scorrimento in quella direzione, il movimento esegue uno scorrimento nativo della pagina.

Scorrimento verticale

Se l'immagine è reimpostata, l'angolo di visualizzazione verticale viene modificato nel caso in cui venga utilizzato un set 360 gradi multidimensionale. In un set 360 gradi unidimensionale, il movimento esegue uno scorrimento nativo della pagina. Oppure, quando un set 360 gradi multidimensionale si trova sull'ultimo o sul primo asse in modo che lo scorrimento verticale non provochi una modifica dell'angolo di visualizzazione verticale, il movimento esegue anche uno scorrimento nativo della pagina.

Se l'immagine è ingrandita, l'immagine viene spostata in verticale. Se l'immagine viene spostata sul bordo della vista e viene ancora eseguito un passaggio di scorrimento in quella direzione, il movimento esegue uno scorrimento nativo della pagina.

NOTA

Il visualizzatore supporta inoltre l'input tocco e mouse sui dispositivi Windows con touchscreen e mouse. Questo supporto, tuttavia, è limitato solo ai browser web Chrome, Internet Explorer 11 e Edge.

Questo visualizzatore è completamente accessibile da tastiera.

Consulta Accessibilità della tastiera e navigazione.

Incorporazione visualizzatore 360 gradi

Pagine web diverse hanno esigenze diverse per il comportamento del visualizzatore. A volte una pagina web fornisce un collegamento che, se selezionato, apre il visualizzatore in una finestra del browser separata. In altri casi, è necessario incorporare il visualizzatore direttamente nella pagina di hosting. In quest’ultimo caso, la pagina web può avere un layout di pagina statico o utilizzare una progettazione reattiva che viene visualizzata in modo diverso su dispositivi diversi o per dimensioni diverse della finestra del browser. Per soddisfare queste esigenze, il visualizzatore supporta tre modalità operative principali: popup, incorporamento di dimensioni fisse e incorporamento di progetti reattivi.

Informazioni sulla modalità popup

In modalità pop-up, il visualizzatore viene aperto in una finestra o scheda del browser Web separata. Occupa l’intera area della finestra del browser e si regola nel caso in cui il browser venga ridimensionato o l’orientamento di un dispositivo mobile venga modificato.

La modalità pop-up è la più comune per i dispositivi mobili. La pagina web carica il visualizzatore utilizzando window.open() Chiamata JavaScript configurata correttamente A HTML o qualsiasi altro metodo appropriato.

Si consiglia di utilizzare una pagina HTML preconfigurata per la modalità di funzionamento popup. In questo caso, si chiama SpinViewer.html e si trova all'interno del html5/ sottocartella della distribuzione standard IS-Viewers:

<s7viewers_root>/html5/SpinViewer.html

Puoi ottenere una personalizzazione visiva applicando CSS personalizzata.

Di seguito è riportato un esempio di codice HTML che apre il visualizzatore in una nuova finestra:

<a href="https://s7d1.scene7.com/s7viewers/html5/SpinViewer.html?asset=Scene7SharedAssets/SpinSet_Sample&stagesize=500,400"
target="_blank">Open popup viewer</a>

Informazioni sulla modalità di incorporamento a dimensione fissa e sulla modalità di incorporamento a progettazione reattiva

In modalità incorporata, il visualizzatore viene aggiunto alla pagina web esistente, che potrebbe già avere alcuni contenuti per i clienti non correlati al visualizzatore. Il visualizzatore occupa normalmente solo una parte del patrimonio immobiliare di una pagina web.

I casi d’uso principali sono le pagine web orientate per desktop o dispositivi tablet e le pagine di progettazione reattive che regolano automaticamente il layout a seconda del tipo di dispositivo.

L’incorporamento a dimensione fissa viene utilizzato quando il visualizzatore non ne modifica le dimensioni dopo il caricamento iniziale. Questa è la scelta migliore per le pagine web con un layout statico.

L’incorporamento reattivo della progettazione presuppone che il visualizzatore debba essere ridimensionato in fase di esecuzione in risposta alla modifica delle dimensioni del suo contenitore DIV. Il caso d’uso più comune è l’aggiunta di un visualizzatore a una pagina web che utilizza un layout di pagina flessibile.

In modalità di incorporamento di un design reattivo, il visualizzatore si comporta in modo diverso a seconda del modo in cui la pagina web ridimensiona il suo contenitore DIV. Se la pagina web imposta solo la larghezza del contenitore DIV, lasciando libera la sua altezza, lo spettatore sceglie automaticamente la sua altezza in base alle proporzioni della risorsa utilizzata. Questa funzionalità assicura che la risorsa si adatti perfettamente alla vista senza alcuna spaziatura sui lati. Questo caso d’uso è il più comune per le pagine web che utilizzano framework di layout di progettazione reattivi come Bootstrap o Foundation.

In caso contrario, se la pagina web imposta sia la larghezza che l’altezza per il contenitore del visualizzatore DIV, il visualizzatore riempie solo tale area e segue le dimensioni fornite dal layout della pagina web. Un buon esempio potrebbe essere l’incorporamento del visualizzatore in una sovrapposizione modale, in cui la sovrapposizione viene ridimensionata in base alle dimensioni della finestra del browser web.

Incorporamento a dimensione fissa

Per aggiungere il visualizzatore 360 gradi a una pagina web, effettua le seguenti operazioni:

  1. Aggiunta del file JavaScript del visualizzatore alla pagina web.

  2. Definizione del contenitore DIV.

  3. Impostazione delle dimensioni del visualizzatore.

  4. Creazione e inizializzazione del visualizzatore.

  5. Aggiunta del file JavaScript del visualizzatore alla pagina web.

    Per creare un visualizzatore è necessario aggiungere un tag script nell’intestazione del HTML. Prima di poter utilizzare l’API del visualizzatore, assicurati di includere: SpinViewer.js. SpinViewer.js si trova sotto html5/js/ sottocartella della distribuzione standard IS-Viewers:

    <s7viewers_root>/html5/js/SpinViewer.js

    Puoi utilizzare un percorso relativo se il visualizzatore viene distribuito su uno dei server Dynamic Media di Adobe e viene fornito dallo stesso dominio. In caso contrario, si specifica un percorso completo per uno dei server Dynamic Media di Adobe in cui sono installati i visualizzatori IS.

    Il percorso relativo è simile al seguente:

     <script language="javascript" type="text/javascript" src="/s7viewers/html5/js/SpinViewer.js"></script>
    
    NOTA

    Fai riferimento solo al visualizzatore principale JavaScript include sulla pagina. Non fare riferimento ad altri file JavaScript nel codice della pagina web che potrebbero essere scaricati dalla logica del visualizzatore in fase di esecuzione. In particolare, non fare riferimento direttamente all’SDK di HTML 5 Utils.js libreria caricata dal visualizzatore da /s7viewers percorso di contesto (il cosiddetto SDK consolidato) include). Il motivo è che l'ubicazione di Utils.js o librerie di visualizzatori runtime simili sono completamente gestite dalla logica del visualizzatore e la posizione cambia tra le versioni del visualizzatore. L’Adobe non mantiene le versioni precedenti del visualizzatore secondario includes sul server.

    Di conseguenza, inserendo un riferimento diretto a qualsiasi JavaScript secondario include utilizzato dal visualizzatore sulla pagina interrompe la funzionalità del visualizzatore in futuro quando viene distribuita una nuova versione del prodotto.

  6. Definizione del DIV del contenitore.

    Aggiungi un elemento DIV vuoto alla pagina in cui vuoi che venga visualizzato il visualizzatore. L’ID dell’elemento DIV deve essere definito perché questo ID viene passato successivamente all’API del visualizzatore.

    Il segnaposto DIV è un elemento posizionato, il che significa che position Proprietà CSS impostata su relative o absolute.

    Di seguito è riportato un esempio di un elemento DIV segnaposto definito:

    <div id="s7viewer" style="position:relative"></div>
    
  7. Impostazione delle dimensioni del visualizzatore

    È possibile impostare la dimensione statica del visualizzatore dichiarandolo per .s7spinviewer classe CSS di primo livello in unità assolute oppure utilizzando stagesize modificatore.

    È possibile inserire il dimensionamento in CSS direttamente nella pagina HTML o in un file CSS visualizzatore personalizzato. Viene successivamente assegnato a un record di predefiniti visualizzatore in Dynamic Media Classic o passato esplicitamente utilizzando un comando di stile.

    Consulta Personalizzazione del visualizzatore 360 gradi per ulteriori informazioni sullo stile del visualizzatore con CSS.

    Di seguito è riportato un esempio di definizione di una dimensione di visualizzatore statico nella pagina HTML:

    #s7viewer.s7spinviewer {
     width: 640px;
     height: 480px;
    }
    

    È possibile impostare stagesize modificatore nel record del predefinito visualizzatore in Dynamic Media Classic. In alternativa, puoi trasmetterlo esplicitamente con il codice di inizializzazione del visualizzatore con params o come chiamata API come descritto nella sezione Riferimento comando, come segue:

     spinViewer.setParam("stagesize",
    "640,480");
    

    Si consiglia un approccio basato su CSS, che viene utilizzato in questo esempio.

  8. Creazione e inizializzazione del visualizzatore.

    Una volta completati i passaggi precedenti, puoi creare un’istanza di s7viewers.SpinViewer classe, passa tutte le informazioni di configurazione al relativo costruttore e chiama init() su un'istanza del visualizzatore. Le informazioni di configurazione vengono passate al costruttore come oggetto JSON. Questo oggetto ha almeno containerId campo contenente il nome dell’ID contenitore del visualizzatore e nidificato params Oggetto JSON con parametri di configurazione supportati dal visualizzatore. In questo caso di params deve avere almeno l'URL Image Server passato come serverUrl proprietà e risorsa iniziale come asset parametro. API di inizializzazione basata su JSON consente di creare e avviare il visualizzatore con una singola riga di codice.

    È importante aggiungere il contenitore del visualizzatore al DOM in modo che il codice del visualizzatore possa trovare l’elemento contenitore in base al relativo ID. Alcuni browser ritardano la creazione di DOM fino alla fine della pagina web. Per la massima compatibilità, chiama il init() metodo immediatamente prima della chiusura BODY o sul corpo onload() evento.

    Allo stesso tempo, l’elemento contenitore non deve ancora necessariamente far parte del layout della pagina web. Ad esempio, può essere nascosto utilizzando display:none stile assegnato. In questo caso, il visualizzatore ritarda il processo di inizializzazione fino al momento in cui la pagina web riporta l’elemento contenitore al layout. Quando si verifica questa azione, il caricamento del visualizzatore riprende automaticamente.

    Di seguito è riportato un esempio di creazione di un’istanza del visualizzatore, mediante il passaggio delle opzioni di configurazione minime necessarie al costruttore e la chiamata al init() metodo. L’esempio presuppone spinViewer è l’istanza del visualizzatore, s7viewer è il nome del segnaposto DIV, http://s7d1.scene7.com/is/image/ è l’URL di Image Server e Scene7SharedAssets/SpinSet_Sample è la risorsa.

    <script type="text/javascript">
    var spinViewer = new s7viewers.SpinViewer({
     "containerId":"s7viewer",
    "params":{
     "asset":"Scene7SharedAssets/SpinSet_Sample",
     "serverurl":"http://s7d1.scene7.com/is/image/"
    }
    }).init();
    </script>
    

    Il codice che segue è un esempio completo di una pagina web banale che incorpora il visualizzatore 360 gradi con una dimensione fissa:

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SpinViewer.js"></script>
    <style type="text/css">
    #s7viewer.s7spinviewer {
     width: 640px;
     height: 480px;
    }
    </style>
    </head>
    <body>
    <div id="s7viewer" style="position:relative"></div>
    <script type="text/javascript">
    var spinViewer = new s7viewers.SpinViewer({
     "containerId":"s7viewer",
    "params":{
     "asset":"Scene7SharedAssets/SpinSet_Sample",
     "serverurl":"http://s7d1.scene7.com/is/image/"
    }
    }).init();
    </script>
    </body>
    </html>
    

Design reattivo con altezza illimitata

Con l’incorporamento di un design reattivo, la pagina web solitamente dispone di un layout flessibile che determina la dimensione di runtime del contenitore del visualizzatore DIV. Ai fini di questo esempio, si supponga che la pagina web consenta il contenitore del visualizzatore DIV per occupare il 40% delle dimensioni della finestra del browser web, senza limitazioni di altezza. Il codice HTML risultante per la pagina Web è simile al seguente:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

L’aggiunta del visualizzatore a una pagina di questo tipo è simile all’incorporamento di dimensioni fisse, con l’unica differenza che non è necessario definire esplicitamente le dimensioni del visualizzatore.

  1. Aggiunta del file JavaScript del visualizzatore alla pagina web.
  2. Definizione del DIV del contenitore.
  3. Creazione e inizializzazione del visualizzatore.

Tutti i passaggi precedenti sono gli stessi dell’incorporamento a dimensione fissa. Aggiungi il contenitore DIV al "titolare" esistente DIV. Il codice seguente è un esempio completo. Puoi vedere come cambiano le dimensioni del visualizzatore quando il browser viene ridimensionato e come le proporzioni del visualizzatore corrispondono alla risorsa.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SpinViewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var spinViewer = new s7viewers.SpinViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/SpinSet_Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/"
}
}).init();
</script>
</body>
</html>

La pagina di esempi seguente illustra altri casi d’uso reali di progetti reattivi con altezza illimitata incorporati:

Demo live

Percorso demo alternativo

Dimensione flessibile che incorpora con larghezza e altezza definite

In presenza di un’incorporazione di dimensioni flessibili con larghezza e altezza definite, lo stile della pagina web è diverso. In altre parole, fornisce entrambe le dimensioni al "titolare" DIV e la centra nella finestra del browser. Inoltre, la pagina web imposta le dimensioni del HTML e BODY al 100%:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

I passaggi di incorporamento rimanenti sono identici all’incorporamento reattivo con altezza illimitata. L’esempio risultante è il seguente:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SpinViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var spinViewer = new s7viewers.SpinViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/SpinSet_Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/"
}
}).init();
</script>
</body>
</html>

Incorporazione tramite API basata su Set

Invece di utilizzare l’inizializzazione basata su JSON è possibile utilizzare un’API basata su setter e un costruttore no-args. Con tale costruttore API non accetta parametri e i parametri di configurazione sono specificati utilizzando setContainerId(), setParam(), e setAsset() Metodi API con chiamate JavaScript separate.

L’esempio seguente mostra un’incorporazione a dimensione fissa con API basate su setter:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SpinViewer.js"></script>
<style type="text/css">
#s7viewer.s7spinviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var spinViewer = new s7viewers.SpinViewer();
spinViewer.setContainerId("s7viewer");
spinViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
spinViewer.setAsset("Scene7SharedAssets/SpinSet_Sample");
spinViewer.init();
</script>
</body>
</html>

In questa pagina