Zoom

Hinzufügen der Viewer-JavaScript-Datei zu Ihrer Web-Seite.

Definieren des Container-DIV.

Festlegen der Viewer-Größe.

Viewer erstellen und initialisieren.

Hinzufügen der Viewer-JavaScript-Datei zu Ihrer Web-Seite.

Zum Erstellen eines Viewers müssen Sie dem HTML-Head ein Script-Tag hinzufügen. Bevor Sie die Viewer-API verwenden können, stellen Sie sicher, dass Sie ZoomViewer.js einbeziehen. Die ZoomViewer.js-Datei befindet sich im html5/js/ Unterordner Ihrer standardmäßigen IS-Viewers-Bereitstellung:

Definieren des Container-DIV.

Fügen Sie der Seite, auf der der Viewer angezeigt werden soll, ein leeres DIV-Element hinzu. Für das DIV-Element muss eine ID definiert sein, da diese ID später an die Viewer-API übergeben wird.

Das Platzhalter-DIV ist ein positioniertes Element, d. h. die position CSS-Eigenschaft ist auf relative oder absolute festgelegt.

Im Folgenden finden Sie ein Beispiel für ein definiertes Platzhalter-DIV-Element:

<div id="s7viewer" style="position:relative"></div>

Festlegen der Viewer-Größe.

Dieser Viewer zeigt Miniaturansichten an, wenn Sie mit Sets mit mehreren Elementen arbeiten. Auf Desktop-Systemen werden Miniaturansichten unter der Hauptansicht platziert. Gleichzeitig ermöglicht der Viewer den Austausch des Haupt-Assets zur Laufzeit mithilfe setAsset() API. Als Entwickler haben Sie die Kontrolle darüber, wie der Viewer den Bereich Miniaturen unten verwaltet, wenn das neue Asset nur ein Element enthält. Es ist möglich, die äußere Viewer-Größe intakt zu halten und die Hauptansicht ihre Höhe erhöhen und den Bereich für Miniaturansichten belegen zu lassen. Sie können auch die Größe der Hauptansicht unverändert lassen und den äußeren Viewer-Bereich reduzieren, sodass der Webseiteninhalt nach oben verschoben wird, und freie Bildschirmfläche verwenden, die von den Miniaturen übrig geblieben ist.

Um die äußeren Viewer-Grenzen intakt zu halten, definieren Sie die Größe für die .s7zoomviewer CSS-Klasse der obersten Ebene in absoluten Einheiten. Die Größenanpassung in CSS kann direkt auf der HTML-Seite vorgenommen werden. Sie kann auch in eine benutzerdefinierte Viewer-CSS-Datei eingefügt werden, die später einem Viewer-Vorgabeneintrag in Dynamic Media Classic zugewiesen oder explizit mithilfe eines Stilbefehls übergeben wird.

Weitere Informationen Formatieren des Viewers mit CSS finden Sie unter „AnpassenZoom-Viewers“ .

Im Folgenden finden Sie ein Beispiel für die Definition einer statischen äußeren Viewer-Größe auf der HTML-Seite:

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

Im folgenden Beispiel sehen Sie das Verhalten mit einem festen äußeren Viewer. Beachten Sie, dass sich beim Wechseln zwischen Sets die Größe des äußeren Viewers nicht ändert:

https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/zoom/ZoomViewer-fixed-outer-area.html?lang=de

Um die Hauptansichtsdimensionen statisch zu machen, definieren Sie die Viewer-Größe in absoluten Einheiten für die SDK-Komponente des inneren Container mithilfe des .s7zoomviewer- .s7container CSS-Selektors oder durch Verwendung stagesize Modifikators.

Im Folgenden finden Sie ein Beispiel dafür, wie Sie die Viewer-Größe für die SDK-Komponente des inneren Container definieren, sodass der Hauptansichtsbereich beim Wechseln des Assets seine Größe nicht ändert:

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

Die folgende Demoseite zeigt das Viewer-Verhalten mit einer festen Hauptansichtsgröße. Beachten Sie, dass beim Wechseln zwischen Sets die Hauptansicht statisch bleibt und der Webseiteninhalt vertikal verschoben wird.

https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/zoom/ZoomViewer-fixed-main-view.html?lang=de

Sie können den Modifikator "stagesize" im Datensatz „Viewer-Vorgabe“ in Dynamic Media Classic festlegen. Sie können sie auch explizit mit dem Viewer-Initialisierungs-Code mit der params-Sammlung oder als API-Aufruf übergeben, wie im Abschnitt „Befehlsreferenz“ dieser Hilfe beschrieben, wie in der folgenden Abbildung dargestellt:

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

Ein CSS-basierter Ansatz wird empfohlen und wird in diesem Beispiel verwendet.

Viewer erstellen und initialisieren.

Wenn Sie die obigen Schritte ausgeführt haben, erstellen Sie eine Instanz s7viewers.ZoomViewer Klasse, übergeben alle Konfigurationsinformationen an ihren Konstruktor und rufen init() Methode in einer Viewer-Instanz auf.

Konfigurationsinformationen werden als JSON-Objekt an den Konstruktor übergeben. Dieses Objekt sollte mindestens über containerId Feld verfügen, das den Namen der Viewer-Container-ID enthält und params JSON-Objekt mit Konfigurationsparametern verschachtelt ist, die der Viewer unterstützt. In diesem Fall muss für das params-Objekt mindestens die Bildbereitstellungs-URL als serverUrl-Eigenschaft und das anfängliche Asset als asset-Parameter übergeben werden. Mit der JSON-basierten Initialisierungs-API können Sie den Viewer mit einer einzigen Codezeile erstellen und starten.

Es ist wichtig, dass der Viewer-Container zum DOM hinzugefügt wird, damit der Viewer-Code das Container-Element anhand seiner ID finden kann. Einige Browser verzögern die Erstellung von DOM bis zum Ende der Web-Seite. Um maximale Kompatibilität zu erzielen, rufen Sie die init()-Methode unmittelbar vor dem schließenden BODY-Tag oder im body-onload() auf.

Gleichzeitig sollte das Container-Element noch nicht unbedingt Teil des Web-Seiten-Layouts sein. Beispielsweise kann sie mithilfe display:none ihr zugewiesenen Stils ausgeblendet werden. In diesem Fall verzögert der Viewer den Initialisierungsprozess bis zu dem Moment, an dem die Web-Seite das Container-Element wieder zum Layout zurückbringt. Wenn diese Aktion stattfindet, wird das Laden des Viewers automatisch fortgesetzt.

Im Folgenden finden Sie ein Beispiel für das Erstellen einer Viewer-Instanz, das Übergeben der erforderlichen Mindestkonfigurationsoptionen an den Konstruktor und das Aufrufen der init()-Methode. In diesem Beispiel wird davon ausgegangen, zoomViewer die Viewer-Instanz s7viewer der Name des Platzhalter-DIV, http://s7d1.scene7.com/is/image/ die Bildbereitstellungs-URL und Scene7SharedAssets/ImageSet-Views-Sample das Asset ist.

<script type="text/javascript">
var zoomViewer = new s7viewers.ZoomViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/"
}
}).init();
</script>

Der folgende Code ist ein vollständiges Beispiel für eine triviale Web-Seite, bei der der Video-Viewer mit einer festen Größe eingebettet wird:

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