Inline-Zoom inline-zoom

Der Inline-Zoom-Viewer ist ein Bild-Viewer. Es wird ein statisches Bild mit der gezoomten Version über diesem statischen Bild angezeigt, wenn ein Benutzer die Hauptansicht umblättert oder berührt. Dieser Viewer arbeitet mit Bildsets und die Navigation erfolgt mithilfe von Farbfeldern. Es wurde für Desktops und Mobilgeräte entwickelt.

Der Viewer-Typ ist 504.

Siehe Systemanforderungen und Voraussetzungen.

Demo-URL section-e1c3106f5b3e445d9b95be337c2f94e2

https://s7d9.scene7.com/s7viewers/html5/FlyoutViewer.html?asset=Scene7SharedAssets/ImageSet-Views-Sample&config=Scene7SharedAssets/Universal_HTML5_Zoom_Inline&stagesize=500,400

Inline-Zoom-Viewer section-f21ac23d3f6449ad9765588d69584772

Der Inline-Zoom-Viewer stellt eine JavaScript-Hauptdatei und eine Reihe von Hilfsdateien (eine JavaScript-Include-Datei mit allen Viewer-SDK-Komponenten, die von diesem Viewer, Assets und CSS verwendet werden) dar, die vom Viewer zur Laufzeit heruntergeladen werden.

Der Inline-Zoom-Viewer kann sowohl im Popup-Modus mithilfe einer produktionsbereiten HTML-Seite verwendet werden, die mit Image Serving Viewers bereitgestellt wird, als auch im eingebetteten Modus, wo er mithilfe der dokumentierten API in eine Ziel-Web-Seite integriert wird.

Die Konfiguration und die Skinning-Funktion ähneln denen der anderen Viewer. Sie können benutzerdefiniertes CSS verwenden, um Skinning anzuwenden.

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

Interagieren mit dem Inline-Zoom-Viewer section-ab66eb6955aa4a8aa6d14a3b3acfed3f

Der Inline-Zoom-Viewer unterstützt Einzelkontakt- und Multi-Touch-Gesten, die in anderen Mobile Apps häufig vorkommen.

Der Viewer unterstützt auch Touch-Eingabe- und Mauseingaben auf Windows-Geräten mit Touchscreen und Maus. Diese Unterstützung ist jedoch auf Chrome-, Internet Explorer 11- und Edge-Webbrowser beschränkt.

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

Siehe Barrierefreiheit und Navigation auf der Tastatur.

Einbetten des Inline-Zoom-Viewers section-6bb5d3c502544ad18a58eafe12a13435

Verschiedene Webseiten haben unterschiedliche Anforderungen an das Viewer-Verhalten. Manchmal bietet eine Webseite einen anklickbaren Link, der den Viewer in einem separaten Browserfenster öffnet. In anderen Fällen kann es erforderlich sein, 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 unterschiedlich angezeigt wird, oder für verschiedene Browser-Fenstergrößen. Um diese Anforderungen zu erfüllen, unterstützt der Viewer drei Hauptbetriebsmodi: Popup, Einbettung fester Größe und responsives Einbetten.

Popup

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, wenn die Größe des Browser-Fensters geändert oder die Geräteausrichtung geändert wird.

Dieser Modus wird am häufigsten für Mobilgeräte verwendet. 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, die vordefinierte HTML-Seite für den Popup-Modus mit dem Namen FlyoutViewer.html zu verwenden. Sie befindet sich im Unterordner html5/ Ihrer standardmäßigen Image Serving-Viewers-Bereitstellung:

<s7viewers_root>/html5/FlyoutViewer.html

Außerdem muss die FlyoutZoomView-Komponente so konfiguriert sein, dass sie im Inline-Zoom-Modus funktioniert. Es wird empfohlen, die vordefinierte Vorgabe "Scene7SharedAssets/Universal_HTML5_Zoom_Inline"für den Inline-Zoom-Viewer oder eine daraus abgeleitete benutzerdefinierte Vorgabe zu verwenden. Die visuelle Anpassung kann durch Anwendung von benutzerdefiniertem CSS erreicht werden.

Im Folgenden finden Sie ein HTML-Codebeispiel, das den Viewer in einem neuen Fenster öffnet:

 <a href="http://s7d1.scene7.com/s7viewers/html5/FlyoutViewer.html?asset=Scene7SharedAssets/ImageSet-Views-Sample&config=Scene7SharedAssets/Universal_HTML5_Zoom_Inline"target="_blank">Open popup viewer</a>

Einbetten fester Größe und responsives Einbetten

Im eingebetteten Modus wird der Viewer der vorhandenen Web-Seite 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 Website-Immobilien.

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

Der Einbettungsmodus für feste Größe wird verwendet, wenn die Größe des Viewers nach dem ersten Laden nicht geändert wird. Diese Auswahl eignet sich am besten für Webseiten mit statischem Seitenlayout.

Responsives Einbettungsmodus für Design setzt voraus, dass die Größe des Viewers während der Laufzeit als Reaktion auf die Größenänderung des Containers DIV geändert werden muss. Der häufigste Anwendungsfall ist das Hinzufügen eines Viewers zu einer Webseite, die ein flexibles Seitenlayout verwendet.

Stellen Sie bei Verwendung des Einbettungsmodus für responsives Design mit dem Inline-Zoom-Viewer sicher, dass Sie explizite Haltepunkte für das Hauptansichtsbild mit dem Parameter imagereload angeben. Idealerweise sollten Sie Ihre Haltepunkte mit den Viewer-Breitenhaltepunkten abgleichen, wie von der Web-Seiten-CSS vorgeschrieben.

Im Einbettungsmodus für responsive Designs verhält sich der Viewer je nach Größe des Webseitenbehälters DIV unterschiedlich. Wenn die Webseite nur die Breite des Containers "DIV" festlegt und seine Höhe unbegrenzt bleibt, wählt der Viewer automatisch seine Höhe entsprechend dem Seitenverhältnis des verwendeten Assets aus. Diese Funktion bedeutet, dass das Asset perfekt in die Ansicht passt, ohne dass die Seiten aufgefüllt werden. Dieser Anwendungsfall ist der häufigste bei Webseiten, die responsive Design-Layout-Frameworks wie Bootstrap oder Foundation verwenden.

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 vom Web-Seiten-Layout bereitgestellten Größe. Ein gutes Anwendungsbeispiel 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 fügen den Viewer zu einer Web-Seite hinzu, indem Sie Folgendes ausführen:

<s7viewers_root>/html5/js/FlyoutViewer.js

Sie können einen relativen Pfad verwenden, wenn der Viewer auf einem der Adobe Dynamic Media-Server bereitgestellt wird und von derselben Domäne bereitgestellt wird. Andernfalls geben Sie einen vollständigen Pfad zu einem der Adobe Dynamic Media-Server an, auf dem die IS-Viewer installiert sind.

Ein relativer Pfad sieht wie folgt aus:

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

Responsives Design mit uneingeschränkter Höhe section-056cb574713c4d07be6d07cf3c598839

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. Im folgenden 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 HTML-Code der Webseite würde wie folgt aussehen:

<!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 den Schritten zum Einbetten fester Größe. Der einzige Unterschied besteht darin, dass Sie die feste Größe von der standardmäßigen Viewer-CSS mit der in relativen Einheiten festgelegten Größe überschreiben müssen.

Alle oben genannten Schritte sind mit der Einbettung in feste Größe identisch, mit den folgenden drei Ausnahmen:

#s7viewer.s7flyoutviewer {
 width: 100%;
 height: 100%;
}

Der folgende Code ist ein vollständiges Beispiel. Beachten Sie, 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/FlyoutViewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
#s7viewer.s7flyoutviewer {
 width: 100%;
 height: 100%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative;z-index:1"></div>
</div>
<script type="text/javascript">
var inlineZoomViewer = new s7viewers.FlyoutViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
"config" : "Scene7SharedAssets/Universal_HTML5_Zoom_Inline",
"contenturl" : "http://s7d1.scene7.com/is/content/",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "imagereload":"1,breakpoint,200;400;800;1600"
}
}).init();
</script>
</body>
</html>

Die folgende Beispielseite zeigt die reale Nutzung responsiver Designs, die mit unbegrenzter Höhe eingebettet werden:

Live-Demos

Alternativer Demostandort

Flexible Größeneinbettung mit definierter Breite und Höhe section-0a329016f9414d199039776645c693de

Wenn eine Einbettung in flexibler Größe mit definierter Breite und Höhe erfolgt, unterscheidet sich der Webseitenstil. Es stellt beide Größen für den DIV "holder" bereit und zentriert ihn im Browserfenster. Außerdem setzt die Webseite die Größe der Elemente HTML und BODY auf 100 Prozent.

<!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 übrigen Schritte zum Einbetten sind mit den Schritten für responsives 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/FlyoutViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
#s7viewer.s7flyoutviewer {
 width: 100%;
 height: 100%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative;z-index:1"></div>
</div>
<script type="text/javascript">
var inlineZoomViewer = new s7viewers.FlyoutViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
"config" : "Scene7SharedAssets/Universal_HTML5_Zoom_Inline",
"contenturl" : "http://s7d1.scene7.com/is/content/",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "imagereload":"1,breakpoint,200;400;800;1600"
}
}).init();
</script>
</body>
</html>

Einbetten mit der Setter-basierten API section-af26f0cc2e5140e8a9bfd0c6a841a6d1

Statt eine JSON-basierte Initialisierung zu verwenden, ist es möglich, setter-basierte API und den no-args-Konstruktor zu verwenden. Bei Verwendung dieses API-Konstruktors 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 Verwendung der Einbettung fester Größe in eine setter-basierte API:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/FlyoutViewer.js"></script>
<style type="text/css">
#s7viewer.s7flyoutviewer {
 width: 640px;
 height: 480px;
}
</style>
</head><body>
<div id="s7viewer" style="position:relative;z-index:1;"></div>
<script type="text/javascript">
var inlineZoomViewer = new s7viewers.FlyoutViewer();
inlineZoomViewer.setContainerId("s7viewer");
inlineZoomViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
inlineZoomViewer.setParam("config", "Scene7SharedAssets/Universal_HTML5_Zoom_Inline");
inlineZoomViewer.setParam("contenturl", "http://s7d1.scene7.com/is/content/");
inlineZoomViewer.setAsset("Scene7SharedAssets/ImageSet-Views-Sample");
inlineZoomViewer.init();
</script>
</body>
</html>