Interagieren mit dem Zoom-Viewer

Der Zoom-Viewer unterstützt die folgenden Touch-Gesten, die in anderen Mobile Apps üblich sind. 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 auch dann durch die Seite navigieren, wenn der Viewer den größten Teil des Gerätebildschirms einnimmt.

GesteBeschreibung
Einfaches TippenWählt neue Miniaturen in Farbfeldern aus. In der Hauptansicht werden Elemente der Benutzeroberfläche ein- oder ausgeblendet.
DoppeltippenZoomt in eine Ebene, bis die maximale Vergrößerung erreicht ist. Mit der nächsten Doppeltipp-Geste wird der Viewer auf den anfänglichen Anzeigestatus zurückgesetzt.
ZwickerZoomt ein oder aus.
Horizontales Wischen oder Schnipsen

Scrollt durch die Liste der Farbfelder in der Farbfeldleiste.

Wenn sich das Bild in einem zurückgesetzten Zustand befindet und der für die Bildübergänge auf „Folie“ gesetzt ist, wird das Asset mit der Folienanimation geändert. Für andere Frametransition- führt die Geste einen nativen Bildlauf der Seite durch.

Wenn das Bild vergrößert wird, wird es horizontal verschoben. Wenn das Bild an den Ansichtsrand verschoben wird und ein Wischen in die gleiche Richtung ausgeführt wird, führt die Geste einen nativen Bildlauf der Seite durch.

Vertikales Wischen

Wenn sich das Bild in einem zurückgesetzten Zustand befindet, führt die Geste einen nativen Seitenrollvorgang durch.

Wenn das Bild vergrößert wird, wird es vertikal verschoben. Wenn das Bild an den Ansichtsrand verschoben und in die gleiche Richtung gewischt wird, führt die Geste einen nativen Seitenscroll durch.

Wenn die Geste innerhalb des Farbfeldbereichs ausgeführt wird, wird ein nativer Seitenscroll durchgeführt.

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

Dieser Viewer ist vollständig mit der Tastatur zugänglich.

Siehe Tastaturzugriff und Navigation.

Einbetten des Zoom-Viewers

Verschiedene Web-Seiten haben unterschiedliche Anforderungen an das Viewer-Verhalten. Manchmal enthält eine Web-Seite einen Link, der bei Auswahl den Viewer in einem separaten Browser-Fenster öffnet. In anderen Fällen ist es erforderlich, den Viewer direkt in die Hosting-Seite einzubetten. Im letzteren Fall kann die Web-Seite ein statisches Layout haben oder ein responsives Design verwenden, das auf verschiedenen Geräten oder für verschiedene Browser-Fenstergrößen unterschiedlich angezeigt wird. Um diesen Anforderungen gerecht zu werden, unterstützt der Viewer drei primäre Betriebsmodi: Popup, Einbettung mit fester Größe und Einbetten von responsivem Design.

Über den Popup-Modus

Im Popup-Modus wird der Viewer in einem separaten Fenster oder einer separaten Registerkarte des Webbrowsers geöffnet. Sie nimmt den gesamten Browser-Fensterbereich in Anspruch und passt sich an, falls die Größe des Browsers geändert oder die Ausrichtung des Geräts geändert wird.

Dieser Modus ist bei Mobilgeräten am häufigsten. Die Web-Seite lädt den Viewer mithilfe window.open() JavaScript-Aufrufs, eines ordnungsgemäß konfigurierten HTML-Elements A einer anderen geeigneten Methode.

Es wird empfohlen, eine vorkonfigurierte HTML-Seite für den Popup-Betriebsmodus zu verwenden. Die vorkonfigurierte HTML-Seite heißt ZoomViewer.html und befindet sich im html5/ Unterordner Ihrer standardmäßigen IS-Viewers-Bereitstellung wie folgt:

<s7viewers_root>/html5/ZoomViewer.html

Wenden Sie benutzerdefiniertes CSS an, um ein benutzerdefiniertes Erscheinungsbild für die Seite zu erzielen.

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

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

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

Im eingebetteten Modus wird der Viewer zu der vorhandenen Web-Seite hinzugefügt, die möglicherweise bereits einige Kundeninhalte enthält, die nicht mit dem Viewer verknüpft sind. Der Viewer belegt normalerweise nur einen Teil des Grundbesitzes der Web-Seite.

Die wichtigsten Anwendungsfälle sind Web-Seiten, die für Desktops oder Tablet-Geräte ausgerichtet sind, sowie responsive Design-Seiten, die das Layout automatisch je nach Gerätetyp anpassen.

Einbetten in fester Größe wird verwendet, wenn der Viewer seine Größe nach dem ersten Laden nicht ändert. Diese Option ist die beste Wahl für Web-Seiten mit statischem Layout.

Beim responsiven Design-Einbettungsmodus wird davon ausgegangen, dass die Größenanpassung des Viewers zur Laufzeit aufgrund der Größenänderung seiner Container-DIV erforderlich ist. Häufigster Anwendungsfall ist das Hinzufügen eines Viewers zu einer Web-Seite, die ein flexibles Layout verwendet.

Im responsiven Design-Einbettungsmodus verhält sich der Viewer unterschiedlich, je nachdem, wie die Größe der Web-Seite seinen Container-DIV bestimmt. Wenn die Web-Seite nur die Breite des Container-DIV festlegt und seine Höhe nicht eingeschränkt wird, wählt der Viewer automatisch seine Höhe entsprechend dem Seitenverhältnis des verwendeten Assets aus. Diese Logik stellt sicher, dass das Asset perfekt in die Ansicht passt, ohne dass an den Seiten ein Abstand vorhanden ist. Dieser Anwendungsfall ist der häufigste für Web-Seiten, die responsive Layout-Frameworks wie Bootstrap und Foundation verwenden.

Wenn die Web-Seite sowohl die Breite als auch die Höhe für die Container-DIV des Viewers festlegt, füllt der Viewer diesen Bereich aus und folgt der Größe, die die Web-Seite bereitstellt. Einbetten des Viewers in eine modale Überlagerung, bei der die Größe der Überlagerung an die Fenstergröße des Webbrowsers angepasst ist.

Einbetten fester Größe

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

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

  2. Definieren des Container-DIV.

  3. Festlegen der Viewer-Größe.

  4. Viewer erstellen und initialisieren.

  5. 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:

<s7viewers_root>/html5/js/ZoomViewer.js

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

Der relative Pfad sieht wie folgt aus:

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/ZoomViewer.js"></script>
NOTE
Verweisen Sie auf Ihrer Seite nur auf die JavaScript-include-Datei des Haupt-Viewers. Verweisen Sie nicht auf zusätzliche JavaScript-Dateien im Web-Seiten-Code, die möglicherweise von der Logik des Viewers zur Laufzeit heruntergeladen werden. Verweisen Sie insbesondere nicht direkt auf die vom Viewer aus /s7viewers Kontextpfad geladene HTML5 SDK Utils.js-Bibliothek (so genannte konsolidierte SDK-include). Der Grund dafür ist, dass der Speicherort von Utils.js oder ähnlichen Runtime-Viewer-Bibliotheken vollständig von der Logik des Viewers verwaltet wird und sich der Speicherort zwischen den Viewer-Versionen ändert. Adobe speichert ältere Versionen der sekundären Viewer-includes nicht auf dem Server.
Wenn Sie also auf der Seite einen direkten Verweis auf eine sekundäre JavaScript-include einfügen, die vom Viewer verwendet wird, wird die Viewer-Funktionalität in Zukunft unterbrochen, wenn eine neue Produktversion bereitgestellt wird.
  1. 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>
    
  2. 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.

  3. 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>
    

Responsives Design mit unbegrenzter Höhe

Beim Einbetten eines responsiven Designs verfügt die Web-Seite normalerweise über ein flexibles Layout, das die Laufzeitgröße der Container-DIV des Viewers bestimmt. Nehmen wir für das folgende Beispiel an, dass die Web-Seite dem Container-DIV des Viewers ermöglicht, 40 % der Fenstergröße des Webbrowsers zu verwenden, wobei seine Höhe nicht beschränkt wird. Der Web-Seiten-HTML-Code 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 für Einbetten in fester Größe. Der einzige Unterschied besteht darin, dass Sie die Viewer-Größe nicht explizit definieren müssen.

  1. Hinzufügen der Viewer-JavaScript-Datei zu Ihrer Web-Seite.
  2. Definieren des Container-DIV.
  3. Viewer erstellen und initialisieren.

Alle oben genannten Schritte sind dieselben wie bei der Einbettung in fester Größe. Fügen Sie das Container-DIV zum vorhandenen "holder"-DIV hinzu. Der folgende Code ist ein vollständiges Beispiel. Beachten Sie, wie sich die Viewer-Größe ändert, wenn der Browser skaliert wird, und wie das Seitenverhältnis des Viewers mit dem Asset übereinstimmt.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/ZoomViewer.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 zoomViewer = new s7viewers.ZoomViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/"
}
}).init();
</script>
</body>
</html>

Die folgende Beispielseite zeigt weitere reale Verwendungen der responsiven Designeinbettung mit unbegrenzter Höhe:

Live-Demos

Flexible Einbettung mit Breite und Höhe definiert

Wenn es Einbettungen in flexibler Größe gibt, bei denen Breite und Höhe definiert sind, ist der Web-Seiten-Stil anders. Es bietet beide Größen für den "holder" DIV und zentriert ihn im Browser-Fenster. Außerdem legt die Web-Seite die Größe des HTML- und BODY auf 100 Prozent fest.

<!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 identisch mit den Schritten für responsive Designeinbettung mit unbegrenzter Höhe. Das daraus resultierende Beispiel lautet:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/ZoomViewer.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 zoomViewer = new s7viewers.ZoomViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/"
}
}).init();
</script>
</body>
</html>