Zoom zoom

Zoom-Viewer ist ein Bild-Viewer, der ein Zoombild anzeigt. Dieser Viewer arbeitet mit Bildsets und die Navigation erfolgt mithilfe von Farbfeldern. Es verfügt über Zoom-Tools, Vollbildunterstützung, Farbfelder und eine optionale Schaltfläche zum Schließen. Es wurde für Desktops und Mobilgeräte entwickelt.

NOTE
Bilder, die IR (Image Rendering) oder UGC (User-Generated Content) verwenden, werden von diesem Viewer nicht unterstützt.

Viewer-Typ 502.

Siehe Systemanforderungen und Voraussetzungen.

Demo-URL section-e1c3106f5b3e445d9b95be337c2f94e2

https://s7d9.scene7.com/s7viewers/html5/ZoomViewer.html?asset=Scene7SharedAssets/ImageSet-Views-Sample

Zoom-Viewer verwenden section-e6c68406ecdc4de781df182bbd8088b4

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

Sie können den Zoom-Viewer im Popup-Modus verwenden, indem Sie eine produktionsbereite HTML-Seite verwenden, die mit IS-Viewern bereitgestellt wird, oder im eingebetteten Modus, wo sie mithilfe einer dokumentierten API in die Ziel-Web-Seite integriert wird.

Die Konfiguration und die Skinning-Funktion ähneln denen der anderen Viewer. Die gesamte Skinning-Funktion wird über benutzerdefiniertes CSS erreicht.

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

Interagieren mit dem Zoom-Viewer section-642e66ca38cd4032992840ec6c0b0cd2

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

Geste
Beschreibung
Einzeltippen
Wählt neue Miniaturansichten in Farbfeldern aus. In der Hauptansicht werden Elemente der Benutzeroberfläche ausgeblendet oder angezeigt.
Doppeltippen
Vergrößert eine Ebene, bis die maximale Vergrößerung erreicht ist. Mit der nächsten doppelten Tippen-Geste wird der Viewer auf den anfänglichen Anzeigestatus zurückgesetzt.
Pinch
Zoomt ein oder aus.
Horizontales Wischen oder Klick

Scrollt durch die Liste der Farbfelder in der Farbfeldleiste.

Wenn das Bild einen Reset-Status aufweist und der Parameter frametransition auf "Folie"festgelegt ist, wird das Asset mit der Folienanimation geändert. Für andere -Frametransitionsmodi führt die Geste einen nativen Seitenbildlauf durch.

Wenn das Bild vergrößert wird, wird es horizontal verschoben. Wenn das Bild an den Ansichtsrand verschoben wird und ein Wischen in derselben Richtung erfolgt, führt die Geste einen nativen Seitenscrollen durch.

Vertikales Wischen

Wenn das Bild einen Reset-Status aufweist, führt die Geste einen nativen Bildlauf durch.

Wenn das Bild vergrößert wird, wird es vertikal verschoben. Wenn das Bild an die Ansichtskante verschoben wird und eine Wischbewegung in die gleiche Richtung erfolgt, führt die Geste einen nativen Seitenbildlauf durch.

Wenn die Geste innerhalb des Farbfeldbereichs ausgeführt wird, führt sie einen nativen Bildlauf durch.

Der Viewer unterstützt sowohl die Touch-Eingabe als auch die Mauseingabe 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 Zoom-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 Layout 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 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, eine vordefinierte HTML-Seite für den Popup-Betriebsmodus zu verwenden. Die vordefinierte HTML-Seite heißt ZoomViewer.html und befindet sich im Unterordner html5/ Ihrer standardmäßigen IS-Viewer-Bereitstellung, wie im Folgenden gezeigt:

<s7viewers_root>/html5/ZoomViewer.html

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

Im Folgenden finden Sie ein Beispiel für HTML-Code, der den Viewer im 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 mit fester Größe und den Einbettungsmodus für responsives Design

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 Immobilien der Web-Seite.

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

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

Responsive Designeinbettungsmodus geht davon aus, dass die Größenanpassung des Viewers während der Laufzeit aufgrund der Größenänderung des Containers DIV erforderlich ist. Der häufigste Anwendungsfall ist das Hinzufügen eines Viewers zu einer Webseite, die ein flexibles Layout 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 Web-Seite 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 Logik stellt sicher, dass das Asset perfekt in die Ansicht passt, ohne dass die Seiten einen Abstand aufweisen. Dieser Anwendungsfall ist der häufigste bei Webseiten, die responsive Layout-Frameworks wie Bootstrap und Foundation verwenden.

Wenn die Web-Seite die Breite und Höhe für den Container des Viewers DIV festlegt, füllt der Viewer diesen Bereich und folgt der von der Web-Seite bereitgestellten Größe. Einbetten des Viewers in eine modale Überlagerung, bei der die Überlagerung entsprechend der Fenstergröße des Webbrowsers skaliert wird.

Einbettung fester Größe section-44f365e6c0dd40709467a459afa82a7f

Sie fügen den Viewer zu einer Web-Seite hinzu, indem Sie Folgendes ausführen:

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

  2. Definieren des Container-DIV.

  3. Festlegen der Viewer-Größe

  4. Erstellen und Initialisieren des Viewers.

  5. Hinzufügen der Viewer-JavaScript-Datei zu Ihrer Webseite.

    Zum Erstellen eines Viewers müssen Sie ein Skript-Tag im HTML-Kopf hinzufügen. Bevor Sie die Viewer-API verwenden können, stellen Sie sicher, dass Sie ZoomViewer.js einbeziehen. Die Datei ZoomViewer.js befindet sich im Unterordner html5/js/ Ihrer standardmäßigen IS-Viewer-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 von derselben Domäne bereitgestellt wird. Andernfalls geben Sie einen vollständigen Pfad zu einem der Adobe Dynamic Media Classic-Server an, auf dem 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
Referenzieren Sie nur die JavaScript include -Hauptdatei des Viewers auf Ihrer Seite. Referenzieren Sie keine zusätzlichen JavaScript-Dateien im Webseitencode, die möglicherweise von der Viewer-Logik zur Laufzeit heruntergeladen werden. Verweisen Sie insbesondere nicht direkt auf die vom Viewer aus dem Kontextpfad /s7viewers geladene HTML5 SDK Utils.js-Bibliothek (das so genannte konsolidierte SDK include). Der Grund dafür ist, dass der Speicherort von Utils.js oder ähnlichen Laufzeit-Viewer-Bibliotheken vollständig durch die Logik des Viewers verwaltet wird und sich der Speicherort zwischen den Viewer-Versionen ändert. Adobe hält ältere Versionen des sekundären Viewers includes nicht auf dem Server.
Infolgedessen wird die Viewer-Funktion bei der Bereitstellung einer neuen Produktversion durch direkte Referenzierung auf alle sekundären JavaScript include, die vom Viewer auf der Seite verwendet werden, in Zukunft beeinträchtigt.
  1. Definieren des Container-DIV.

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

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

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

    code language-html
    <div id="s7viewer" style="position:relative"></div>
    
  2. Festlegen der Viewer-Größe

    Dieser Viewer zeigt Miniaturansichten bei der Arbeit mit Sets für mehrere Elemente an. Miniaturansichten auf Desktop-Systemen werden unter der Hauptansicht platziert. Gleichzeitig ermöglicht der Viewer den Austausch des Haupt-Assets zur Laufzeit mithilfe der setAsset() -API. Als Entwickler haben Sie die Kontrolle darüber, wie der Viewer den Bereich für Miniaturansichten am unteren Rand verwaltet, wenn das neue Asset nur ein Element enthält. Es ist möglich, die Größe des äußeren Viewers intakt zu halten und die Größe der Hauptansicht zu erhöhen und den Bereich der Miniaturansichten zu vergrößern. Alternativ können Sie die Größe der Hauptansicht statisch halten und den äußeren Viewer-Bereich reduzieren, den Webseiteninhalt nach oben verschieben und die freie Bildschirmseite aus den Miniaturansichten verwenden.

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

    Weitere Informationen zum Formatieren des Viewers mit CSS finden Sie unter Anpassen des Zoom-Viewers .

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

    code language-html
    #s7viewer.s7zoomviewer {
     width: 640px;
     height: 480px;
    }
    

    Im folgenden Beispiel wird das Verhalten mit einem festen äußeren Viewer angezeigt. Beachten Sie, dass sich die äußere Viewer-Größe beim Wechsel zwischen Sets 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 innere Container SDK-Komponente mithilfe des CSS-Selektors .s7zoomviewer .s7container oder mithilfe des Modifikators stagesize .

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

    code language-html
    #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 Viewer-Vorgabendatensatz in Dynamic Media Classic festlegen. Sie können sie auch explizit mit dem Viewer-Initialisierungscode mit der params -Sammlung oder als API-Aufruf übergeben, wie im Abschnitt Befehlsreferenz dieser Hilfe beschrieben, wie im Folgenden:

    code language-html
     zoomViewer.setParam("stagesize",
    "640,480");
    

    Es wird ein CSS-basierter Ansatz empfohlen, der in diesem Beispiel verwendet wird.

  3. Erstellen und Initialisieren des Viewers.

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

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

    Der Viewer-Container muss dem DOM hinzugefügt werden, damit der Viewer-Code das Container-Element anhand seiner Kennung finden kann. Einige Browser verzögern das Erstellen von DOM bis zum Ende der Webseite. Rufen Sie für maximale Kompatibilität die init() -Methode direkt vor dem schließenden BODY -Tag oder das body onload() -Ereignis auf.

    Gleichzeitig sollte das Containerelement nicht unbedingt Teil des Web-Seiten-Layouts sein. Sie kann beispielsweise mit dem ihm zugewiesenen display:none -Stil ausgeblendet werden. In diesem Fall verzögert der Viewer den Initialisierungsprozess so lange, bis die Webseite das Containerelement wieder in das Layout bringt. Wenn diese Aktion auftritt, 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, dass zoomViewer die Viewer-Instanz, s7viewer der Name des Platzhalter-DIV, http://s7d1.scene7.com/is/image/ die Image Serving-URL und Scene7SharedAssets/ImageSet-Views-Sample das Asset ist.

    code language-html
    <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, die den Video-Viewer mit einer festen Größe einbettet:

    code language-html
    <!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 uneingeschränkter Höhe section-b9ca11a7e7aa4f74ab43244cbca37ae0

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 Viewer-Größe nicht explizit definieren müssen.

  1. Hinzufügen der Viewer-JavaScript-Datei zu Ihrer Webseite.
  2. Definieren des Container-DIV.
  3. Erstellen und Initialisieren des Viewers.

Alle oben genannten Schritte sind mit der Einbettung fester Größe identisch. Fügen Sie das Container-DIV zum vorhandenen DIV "holder" hinzu. 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/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 die reale Nutzung responsiver Designs, die mit unbegrenzter Höhe eingebettet werden:

Live-Demos

Flexible Einbettung von Größe mit definierter Breite und Höhe section-3674e6c032594441a6576b7fb1de6e64

Wenn eine Einbettung in flexibler Größe mit definierter Breite und Höhe erfolgt, unterscheidet sich der Webseitenstil. Es bietet beide Größen für den DIV "holder" 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/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>

Einbetten mit einer setter-basierten API section-44e014925f24418b900696003855c0a9

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/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();
zoomViewer.setContainerId("s7viewer");
zoomViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
zoomViewer.setAsset("Scene7SharedAssets/ImageSet-Views-Sample");
zoomViewer.init();
</script>
</body>
</html>
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8