Spin spin

Rotationsset-Viewer ist ein Bild-Viewer, der eine 360-Grad-Ansicht des Bildes oder sogar eine mehrdimensionale Ansicht bietet, wenn ein entsprechendes Rotationsset verwendet wird. Es verfügt über Zoom- und Rotationstools, Vollbildunterstützung und eine optionale Schließen-Schaltfläche. Es wurde für Desktops und Mobilgeräte entwickelt.

Viewer-Typ 503.

Siehe Systemanforderungen und Voraussetzungen.

Demo-URL section-e1c3106f5b3e445d9b95be337c2f94e2

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

Verwenden des Rotationsset-Viewers section-e6c68406ecdc4de781df182bbd8088b4

Der Rotationsset-Viewer stellt eine JavaScript-Hauptdatei und eine Reihe von Hilfedateien dar (eine einzelne JavaScript-Datei enthält alle Viewer-SDK-Komponenten, die von diesem Viewer, den Assets und CSS verwendet werden), die vom Viewer zur Laufzeit heruntergeladen werden.

Der Rotationsset-Viewer kann sowohl im Popup-Modus mit einer produktionsbereiten HTML-Seite verwendet werden, die mit IS-Viewern bereitgestellt wird, als auch im eingebetteten Modus, wo er mithilfe einer dokumentierten API in die Ziel-Web-Seite integriert wird.

Die Konfiguration und die Skinning-Funktion ähneln denen der anderen Viewer. Alle Skins können über benutzerdefiniertes CSS erstellt werden.

Siehe Befehlsreferenz für alle Viewer - Konfigurationsattribute und Befehlsreferenz für alle Viewer - URL

Interagieren mit dem Rotationsset-Viewer section-642e66ca38cd4032992840ec6c0b0cd2

Der Rotationsset-Viewer unterstützt die folgenden Berührungsgesten, die in anderen Mobile Apps häufig vorkommen. Wenn der Viewer die Wischgeste eines Benutzers nicht verarbeiten kann, leitet er das Ereignis an den Webbrowser weiter, um einen nativen Seitenbildlauf durchzuführen. Mit dieser Funktion kann der Benutzer durch die Seite navigieren, selbst wenn der Viewer den größten Teil des Gerätebildschirms einnimmt.

Auf diesen Viewer kann vollständig über die Tastatur zugegriffen werden.

Siehe Barrierefreiheit und Navigation auf der Tastatur.

Einbetten des Rotationsset-Viewers section-6bb5d3c502544ad18a58eafe12a13435

Verschiedene Webseiten haben unterschiedliche Anforderungen an das Viewer-Verhalten. Manchmal stellt eine Webseite einen Link bereit, der, wenn ausgewählt, den Viewer in einem separaten Browserfenster öffnet. In anderen Fällen ist es erforderlich, den Viewer direkt in die Hosting-Seite einzubetten. In letzterem Fall kann die Webseite ein statisches Seitenlayout aufweisen oder ein responsives Design verwenden, das auf verschiedenen Geräten oder für verschiedene Browser-Fenstergrößen unterschiedlich angezeigt wird. Um diese Anforderungen zu erfüllen, unterstützt der Viewer drei Hauptbetriebsmodi: Popup, Einbettung fester Größe und Einbettung responsiver Designs.

Über den Popup-Modus

Im Popup-Modus wird der Viewer in einem separaten Webbrowser-Fenster oder einer separaten Registerkarte geöffnet. Es nimmt den gesamten Bereich des Browser-Fensters und passt sich an, falls die Größe des Browsers geändert wird oder die Ausrichtung eines Mobilgeräts geändert wird.

Der Pop-up-Modus ist der häufigste für Mobilgeräte. Die Webseite lädt den Viewer mit dem Aufruf window.open() JavaScript , dem ordnungsgemäß konfigurierten Element A HTML oder einer anderen geeigneten Methode.

Es wird empfohlen, eine vordefinierte HTML-Seite für den Popup-Betriebsmodus zu verwenden. In diesem Fall wird es als SpinViewer.html bezeichnet und befindet sich im Unterordner html5/ Ihrer standardmäßigen IS-Viewer-Bereitstellung:

<s7viewers_root>/html5/SpinViewer.html

Sie können visuelle Anpassungen durch Anwendung von benutzerdefiniertem CSS erreichen.

Im Folgenden finden Sie ein Beispiel für HTML-Code, der den Viewer in einem neuen Fenster öffnet:

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

Über den Einbettungsmodus mit fester Größe und den Einbettungsmodus für responsives Design

Im eingebetteten Modus wird der Viewer der vorhandenen Webseite hinzugefügt, die möglicherweise bereits über Kundeninhalte verfügt, die nicht mit dem Viewer in Verbindung stehen. Der Viewer belegt normalerweise nur einen Teil der Immobilien einer Web-Seite.

Die wichtigsten Anwendungsfälle sind Web-Seiten, die auf Desktops oder Tablets ausgerichtet sind, sowie responsive Design-Seiten, auf denen das Layout automatisch an den Gerätetyp angepasst wird.

Die Einbettung fester Größe wird verwendet, wenn die Größe des Viewers nach dem ersten Laden nicht geändert wird. Diese Aktion eignet sich am besten für Webseiten mit statischem Layout.

Responsives Einbetten von Design setzt voraus, dass die Größe des Viewers zur Laufzeit geändert werden muss, um auf die Größenänderung des Containers DIV reagieren zu können. Der häufigste Anwendungsfall ist das Hinzufügen eines Viewers zu einer Webseite, die ein flexibles Seitenlayout verwendet.

Im Einbettungsmodus für responsive Designs verhält sich der Viewer unterschiedlich, je nachdem, wie die Größe des Containers auf der Webseite angepasst wird DIV. Wenn die Webseite nur die Breite des Containers "DIV" festlegt und die Höhe nicht eingeschränkt bleibt, wählt der Viewer automatisch seine Höhe entsprechend dem Seitenverhältnis des verwendeten Assets aus. Diese Funktion stellt sicher, dass das Asset perfekt in die Ansicht passt, ohne dass die Seiten einen Abstand aufweisen. Dieser Anwendungsfall ist am häufigsten für Webseiten mit responsiven Design-Layout-Frameworks wie Bootstrap oder Foundation.

Wenn die Web-Seite andernfalls die Breite und Höhe für den Container des Viewers DIV festlegt, füllt der Viewer nur diesen Bereich und folgt der Größe, die das Layout der Web-Seite bietet. Ein gutes Beispiel ist das Einbetten des Viewers in eine modale Überlagerung, bei der die Überlagerung entsprechend der Fenstergröße des Webbrowsers skaliert wird.

Einbettung fester Größe

Sie können den Rotationsset-Viewer wie folgt zu einer Web-Seite hinzufügen:

Responsives Design, eingebettet in unbeschränkte Höhe

Bei der Einbettung responsiver Designs verfügt die Web-Seite normalerweise über ein flexibles Layout, das die Laufzeitgröße des Containers des Viewers DIV vorgibt. Für dieses Beispiel nehmen Sie an, dass die Web-Seite es dem Container DIV des Viewers ermöglicht, 40 % der Fenstergröße des Webbrowsers zu übernehmen, wobei die Höhe unbegrenzt bleibt. Der resultierende HTML-Code der Webseite sieht wie folgt aus:

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

Das Hinzufügen des Viewers zu einer solchen Seite ähnelt der Einbettung in feste Größe, wobei der einzige Unterschied darin besteht, dass Sie die Viewer-Größe nicht explizit definieren müssen.

Alle oben genannten Schritte sind mit der Einbettung fester Größe identisch. Fügen Sie den Container DIV zum vorhandenen "Inhaber" DIV hinzu. Der folgende Code ist ein vollständiges Beispiel. Sie können sehen, wie sich die Viewer-Größe ändert, wenn die Größe des Browsers geändert wird, und wie das Viewer-Seitenverhältnis mit dem Asset übereinstimmt.

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

Die folgende Beispielseite zeigt reale Anwendungsfälle responsiven Designs, die mit unbegrenzter Höhe eingebettet werden:

Live-Demos

Alternativer Demostandort

Flexible Größe, eingebettet in Breite und Höhe definiert

Wenn eine Einbettung in flexibler Größe mit definierter Breite und Höhe erfolgt, unterscheidet sich der Webseitenstil. Das heißt, es stellt beide Größen für den "Inhaber" DIV bereit und zentriert ihn im Browserfenster. Außerdem setzt die Webseite die Größe der Elemente HTML und BODY auf 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>

Die restlichen Einbettungsschritte sind mit dem responsiven Design identisch, das mit uneingeschränkter Höhe eingebettet wird. Das folgende Beispiel zeigt:

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

Einbetten mit Setter-basierter API

Statt die JSON-basierte Initialisierung zu verwenden, ist es möglich, setter-basierte API und den no-args-Konstruktor zu verwenden. Mit diesem API-Konstruktor werden keine Parameter verwendet und Konfigurationsparameter werden mit den API-Methoden setContainerId(), setParam() und setAsset() mit separaten JavaScript-Aufrufen angegeben.

Das folgende Beispiel zeigt die Einbettung von fester Größe in eine setter-basierte API:

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