Zoomen zoom

Zoomviewer is een afbeeldingsviewer waarin een afbeelding wordt weergegeven waarop kan worden ingezoomd. Deze viewer werkt met afbeeldingssets en de navigatie wordt uitgevoerd met stalen. Deze heeft zoomgereedschappen, ondersteuning voor volledig scherm, stalen en een optionele knop Sluiten. Het is ontworpen voor gebruik op desktops en mobiele apparaten.

Viewer type 502.

Zie Systeemvereisten en -vereisten.

Demo-URL section-e1c3106f5b3e445d9b95be337c2f94e2

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

Zoomviewer gebruiken section-e6c68406ecdc4de781df182bbd8088b4

Zoom Viewer vertegenwoordigt een hoofd-JavaScript-bestand en een set hulplijnbestanden (één JavaScript-bestand met alle Viewer SDK-componenten die door deze viewer worden gebruikt, elementen, CSS) die door de viewer in runtime zijn gedownload.

U kunt de Kijker van het Gezoem op pop-up wijze gebruiken gebruikend een productie-klaar HTML pagina die van IS-Kijkers of op ingebedde wijze wordt voorzien, waar het in doelWeb-pagina gebruikend gedocumenteerde API wordt geïntegreerd.

Configuratie en skins zijn vergelijkbaar met die van de andere viewers. Alle skins worden gemaakt door middel van aangepaste CSS.

Zie Command reference common to all viewers - Configuration attributes en Command reference common to all Viewers - URL

Interactie met Zoomviewer section-642e66ca38cd4032992840ec6c0b0cd2

De zoomviewer ondersteunt de volgende aanraakbewegingen die ook in andere mobiele toepassingen worden gebruikt. Wanneer de viewer de veegbeweging van de gebruiker niet kan verwerken, stuurt deze de gebeurtenis door naar de webbrowser om een native paginaschuiving uit te voeren. Met dit soort functionaliteit kan de gebruiker door de pagina navigeren, zelfs als de viewer het grootste deel van het schermgebied van het apparaat in beslag neemt.

De viewer ondersteunt zowel aanraakinvoer als muisinvoer op Windows-apparaten met een aanraakscherm en muis. Deze ondersteuning is echter beperkt tot Chrome, Internet Explorer 11 en alleen Edge-webbrowsers.

Deze viewer is volledig toegankelijk via het toetsenbord.

Zie Toetsenbordtoegankelijkheid en -navigatie.

Zoomviewer insluiten section-6bb5d3c502544ad18a58eafe12a13435

Verschillende webpagina's hebben verschillende vereisten voor viewergedrag. Soms bevat een webpagina een koppeling die de viewer in een apart browservenster opent als deze optie is geselecteerd. In andere gevallen moet u de viewer rechtstreeks insluiten op de hostpagina. In het laatste geval kan de webpagina een statische indeling hebben of een responsief ontwerp gebruiken dat op verschillende apparaten of voor verschillende venstergrootten van de browser anders wordt weergegeven. Om aan deze behoeften tegemoet te komen, ondersteunt de viewer drie primaire bewerkingsmodi: pop-up, insluiten van vaste grootte en insluiten van responsieve ontwerpen.

Pop-upmodus

In de pop-upmodus wordt de viewer geopend in een apart venster of tabblad van een webbrowser. Het neemt het volledige browservenstergebied en past zich aan voor het geval de browser wordt aangepast of de oriëntatie van het apparaat wordt gewijzigd.

Deze modus wordt het meest gebruikt voor mobiele apparaten. De webpagina laadt de viewer met window.open() JavaScript-aanroep, correct geconfigureerd A HTML-element of een andere geschikte methode.

U wordt aangeraden een uit-de-box HTML-pagina te gebruiken voor de pop-upbewerkingsmodus. De uit-van-de-doos HTML pagina wordt geroepen ZoomViewer.html en het bevindt zich onder de html5/ subfolder van uw standaard plaatsing IS-Viewers zoals in het volgende:

<s7viewers_root>/html5/ZoomViewer.html

Pas aangepaste CSS toe om een aangepaste verschijning voor de pagina te bereiken.

Hieronder ziet u een voorbeeld van HTML-code waarmee de viewer in het nieuwe venster wordt geopend:

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

Insluitmodus van vaste grootte en responsieve ontwerpinsluitmodus

In de ingesloten modus wordt de viewer toegevoegd aan de bestaande webpagina, waar al inhoud van de klant beschikbaar is die geen betrekking heeft op de viewer. De viewer neemt normaal gesproken slechts een deel van het onroerend goed van de webpagina in beslag.

De belangrijkste gebruiksgevallen zijn webpagina's die zijn georiënteerd op desktops of tablets, en responsieve, ontworpen pagina's die de lay-out automatisch aanpassen, afhankelijk van het apparaattype.

De insluiting met een vaste grootte wordt gebruikt wanneer de viewer de grootte niet wijzigt na de eerste keer laden. Deze optie is de beste keuze voor webpagina's met een statische indeling.

Bij de insluitmodus voor responsief ontwerp wordt ervan uitgegaan dat het formaat van de viewer tijdens de runtime moet worden aangepast vanwege de wijziging van de grootte van de container DIV. De meest gebruikte optie is het toevoegen van een viewer aan een webpagina die een flexibele indeling gebruikt.

In de responsieve ontwerpinsluitmodus werkt de viewer anders, afhankelijk van de manier waarop de container van de webpagina wordt aangepast DIV. Als de webpagina alleen de breedte van de container instelt DIVWanneer de hoogte onbeperkt blijft, kiest de viewer automatisch de hoogte op basis van de hoogte-breedteverhouding van het gebruikte element. Deze logica zorgt ervoor dat het element perfect in de weergave past zonder opvulling aan de zijkanten. Dit gebruiksgeval is het gemeenschappelijkst voor Web-pagina's die ontvankelijke lay-outkaders zoals Bootstrap en Stichting gebruiken.

Als de webpagina zowel de breedte als de hoogte voor de container van de viewer instelt DIVvult de viewer dat gebied en volgt de grootte die de webpagina biedt. U kunt de viewer bijvoorbeeld insluiten in een modale overlay, waarbij de grootte van de overlay afhankelijk is van de venstergrootte van de webbrowser.

Insluiten met vaste grootte section-44f365e6c0dd40709467a459afa82a7f

U voegt de viewer als volgt toe aan een webpagina:

<s7viewers_root>/html5/js/ZoomViewer.js

U kunt een relatief pad gebruiken als de viewer wordt geïmplementeerd op een van de Adobe Dynamic Media Classic-servers en vanuit hetzelfde domein wordt aangeboden. Anders geeft u een volledig pad op naar een van de Adobe Dynamic Media Classic-servers waarop IS-Viewers zijn geïnstalleerd.

Het relatieve pad ziet er als volgt uit:

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

Responsief ontwerpinsluiting met onbeperkte hoogte section-b9ca11a7e7aa4f74ab43244cbca37ae0

Bij responsieve ontwerpinsluiting heeft de webpagina normaal gesproken een flexibele indeling die de runtimegrootte van de container van de viewer bepaalt DIV. In het volgende voorbeeld wordt ervan uitgegaan dat de webpagina de container van de viewer toestaat DIV om 40% van de grootte van het venster van de Webbrowser te nemen, verlatend zijn hoogte onbeperkt. De HTML-code van de webpagina ziet er als volgt uit:

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

Het toevoegen van de viewer aan een dergelijke pagina is vergelijkbaar met de stappen voor het insluiten van een vaste grootte. Het enige verschil is dat u de viewergrootte niet expliciet hoeft te definiëren.

Alle bovenstaande stappen zijn gelijk aan die bij het insluiten van de vaste grootte. De container DIV toevoegen aan het bestaande "holder" DIV. De volgende code is een volledig voorbeeld. U ziet hoe de grootte van de viewer verandert wanneer de grootte van de browser wordt gewijzigd en hoe de hoogte-breedteverhouding van de viewer overeenkomt met het element.

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

De volgende voorbeeldpagina illustreert het levensechte gebruik van responsieve ontwerpinsluiting met onbeperkte hoogte:

Live demo's

Flexibele insluiting op grootte met gedefinieerde breedte en hoogte section-3674e6c032594441a6576b7fb1de6e64

Als er insluiting in flexibele grootte is waarbij de breedte en hoogte zijn gedefinieerd, is de opmaak van de webpagina anders. Het verstrekt beide grootte aan "holder" DIV en centreer het in het browser venster. Bovendien stelt de webpagina de grootte van de HTML en BODY tot 100 procent.

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

De overige insluitingsstappen zijn identiek aan de stappen die worden gebruikt voor responsieve ontwerpinsluiting met onbeperkte hoogte. Het resulterende voorbeeld is het volgende:

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

Insluiten met behulp van setter-API section-44e014925f24418b900696003855c0a9

In plaats van JSON-gebaseerde initialisatie, is het mogelijk om op setter-gebaseerde API en no-args aannemer te gebruiken. Met deze API-constructor worden geen parameters gebruikt en worden configuratieparameters opgegeven met setContainerId(), setParam(), en setAsset() API-methoden met afzonderlijke JavaScript-aanroepen.

In het volgende voorbeeld wordt het gebruik van insluiting op vaste grootte met een setter-API geïllustreerd:

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