Inline zoomen inline-zoom

Inline Zoom Viewer is een beeldviewer. Er wordt een statische afbeelding weergegeven met de ingezoomde versie die boven die statische afbeelding wordt weergegeven wanneer een gebruiker de hoofdweergave beweegt of aanraakt. Deze viewer werkt met afbeeldingssets en de navigatie wordt uitgevoerd met stalen. Het is ontworpen voor gebruik op desktops en mobiele apparaten.

Viewer type is 504.

Zie vereisten en eerste vereisten van het Systeem.

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 zoomviewer gebruiken section-f21ac23d3f6449ad9765588d69584772

Inline zoomviewer vertegenwoordigt een JavaScript-hoofdbestand en een set helperbestanden (één JavaScript bevat alle Viewer SDK-componenten die door deze viewer worden gebruikt, elementen, CSS) die door de viewer tijdens de runtime zijn gedownload.

De inline zoomviewer kan zowel in de pop-upmodus worden gebruikt met een HTML-pagina die klaar is voor productie en die wordt geleverd met Image Serving Viewers, als in de ingesloten modus waarin deze viewer is geïntegreerd in een doelwebpagina met behulp van gedocumenteerde API.

Configuratie en skins zijn vergelijkbaar met die van de andere viewers. U kunt aangepaste CSS gebruiken om skins toe te passen.

Zie verwijzing van het Bevel gemeenschappelijk aan alle kijkers - de attributen van de Configuratieen verwijzing van het Bevel gemeenschappelijk aan alle Kijkers - URL

Interactie met de Inline Zoom Viewer section-ab66eb6955aa4a8aa6d14a3b3acfed3f

Inline Zoom Viewer ondersteunt Single-touch en multi-touch bewegingen die ook in andere mobiele toepassingen voorkomen.

De viewer ondersteunt ook aanraakinvoer en muisinvoer op Windows-apparaten met aanraakscherm en muis. Deze ondersteuning is echter alleen beschikbaar voor webbrowsers van Chrome, Internet Explorer 11 en Edge.

Deze viewer is volledig toegankelijk via het toetsenbord.

Zie toegankelijkheid van het Toetsenbord en navigatie.

Inline zoomviewer insluiten section-6bb5d3c502544ad18a58eafe12a13435

Verschillende webpagina's hebben verschillende vereisten voor viewergedrag. Soms bevat een webpagina een klikbare koppeling waarmee de viewer in een apart browservenster wordt geopend. In andere gevallen kan het nodig zijn de viewer rechtstreeks in te sluiten in de hostpagina. In het laatste geval heeft de webpagina mogelijk een statische paginalay-out of een responsief ontwerp dat op verschillende apparaten anders wordt weergegeven, of voor verschillende venstergrootten in de browser. Om aan deze behoeften tegemoet te komen, ondersteunt de viewer drie primaire bewerkingsmodi: pop-up, insluiten van vaste grootte en responsieve insluiting.

pop-up

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 wanneer de grootte van het browservenster wordt gewijzigd of de apparaatoriëntatie 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 manier.

U wordt aangeraden de HTML-pagina uit de doos te gebruiken voor de pop-upmodus FlyoutViewer.html . U vindt deze in de submap html5/ van uw standaardimplementatie van Image Serving-Viewers:

<s7viewers_root>/html5/FlyoutViewer.html

Het is ook noodzakelijk om de component FlyoutZoomView te hebben die wordt gevormd om op de gealigneerde gezoemwijze te werken. U wordt aangeraden de voorinstelling voor het uit-de-vak Scene7SharedAssets/Universal_HTML5_Zoom_Inline te gebruiken voor de Inline zoomviewer of een aangepaste voorinstelling die hiervan is afgeleid. Visuele aanpassing kan worden bereikt door aangepaste CSS toe te passen.

Hieronder ziet u een HTML-codevoorbeeld waarmee de viewer in een nieuw venster wordt geopend:

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

Vaste Grootte Inbeddend en het Responsieve Inbedden

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 doorgaans slechts een deel van het vastgoed van een webpagina in beslag.

De meest gebruikte gevallen zijn webpagina's die zijn georiënteerd op desktops of tablets, en responsieve webpagina's die de lay-out automatisch aanpassen, afhankelijk van het apparaattype.

De insluitingsmodus met een vaste grootte wordt gebruikt wanneer de viewer de grootte niet wijzigt nadat de viewer voor het eerst is geladen. Deze optie is het meest geschikt voor webpagina's met een statische pagina-indeling.

Bij de insluitingsmodus voor responsief ontwerp wordt ervan uitgegaan dat de viewer tijdens de runtime de grootte moet wijzigen als reactie op 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 pagina-indeling gebruikt.

Wanneer u responsieve ontwerpinsluitingsmodus gebruikt met de Inline Zoom Viewer, moet u expliciete onderbrekingspunten opgeven voor de hoofdweergaveafbeelding met de parameter imagereload . In het ideale geval past u uw onderbrekingspunten aan met de breedteonderbrekingspunten van de viewer die door de CSS van de webpagina worden voorgeschreven.

In de responsieve ontwerpinsluitingsmodus werkt de viewer anders, afhankelijk van de grootte van een webpaginacontainer DIV . Als de webpagina alleen de breedte van de container DIV instelt en de hoogte onbeperkt laat, kiest de viewer automatisch de hoogte op basis van de hoogte-breedteverhouding van het element dat wordt gebruikt. Dit betekent dat het element perfect in de weergave past zonder opvulling aan de zijkanten. Dit specifieke gebruiksgeval komt het meest voor bij webpagina's die responsieve ontwerplay-outframeworks zoals Bootstrap of Foundation gebruiken.

Als de webpagina zowel de breedte als de hoogte voor de container van de viewer instelt DIV , vult de viewer alleen dat gebied en volgt deze het formaat dat wordt aangegeven door de indeling van de webpagina. Een voorbeeld van een nuttig geval is het insluiten van de viewer in een modale overlay, waarbij de grootte van de overlay wordt aangepast aan de venstergrootte van de webbrowser.

Vaste grootte het inbedden

U voegt de viewer als volgt toe aan een webpagina:

<s7viewers_root>/html5/js/FlyoutViewer.js

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

Een relatief pad ziet er als volgt uit:

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

Responsief ontwerpinsluiting met onbeperkte hoogte section-056cb574713c4d07be6d07cf3c598839

Bij responsieve ontwerpinsluiting heeft de webpagina normaal gesproken een flexibele indeling die de runtimegrootte van de container van de viewer DIV bepaalt. In het volgende voorbeeld wordt ervan uitgegaan dat de webpagina de container DIV van de viewer 40% van de venstergrootte van de webbrowser laat nemen, waarbij de hoogte onbeperkt blijft. 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 vaste grootte van de standaardviewer-CSS moet overschrijven met de grootte die is ingesteld in relatieve eenheden.

Alle bovenstaande stappen zijn gelijk aan de stappen voor de insluiting van een vaste grootte, met de volgende drie uitzonderingen:

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

De volgende code is een volledig voorbeeld. U ziet hoe de grootte van de viewer verandert wanneer de browser wordt aangepast 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/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>

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

Levende demo's

afwisselende manifestplaats

Flexibele insluiting van grootte met gedefinieerde breedte en hoogte section-0a329016f9414d199039776645c693de

Als er insluiting in flexibele grootte is waarbij de breedte en hoogte zijn gedefinieerd, is de opmaak van de webpagina anders. Het biedt zowel grootten als het "holder" DIV-bestand en centreert het in het browservenster. Bovendien stelt de webpagina de grootte van het element HTML en BODY in op 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/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>

Insluiten met behulp van op Setter gebaseerde API section-af26f0cc2e5140e8a9bfd0c6a841a6d1

In plaats van JSON-gebaseerde initialisatie, is het mogelijk om op setter-gebaseerde API en no-args aannemer te gebruiken. Wanneer u deze API-constructor gebruikt, worden er geen parameters gebruikt en worden configuratieparameters opgegeven met de API-methoden setContainerId() , setParam() en setAsset() , met aparte 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/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>