Interactieve afbeelding interactive-image

Interactive Image Viewer is een viewer die één niet-zoombare afbeelding met aanklikbare hotspots weergeeft. Het doel van deze viewer is het implementeren van een 'shoppable banner'-ervaring. Met andere woorden, de gebruiker kan een hotspot boven de bannerafbeelding selecteren en worden omgeleid naar een Quickview- of productdetailpagina op uw website. Het is ontworpen voor gebruik op desktops en mobiele apparaten.

Het viewertype is 508.

Demo-URL section-c0ad383db6a444979dc7eeb1ec4cf54d

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/InteractiveImage.html?lang=nl-NL

Systeemvereisten section-b7270cc4290043399681dc504f043609

Zie Systeemvereisten.

Interactieve afbeeldingsviewer gebruiken section-e6c68406ecdc4de781df182bbd8088b4

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

Interactive Image Viewer kan alleen worden gebruikt in de ingesloten modus, waar deze met de gedocumenteerde API is geïntegreerd in de doelwebpagina.

Configuratie en skins zijn vergelijkbaar met die van de andere viewers die in deze Help worden beschreven. 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 Interactive Image Viewer section-642e66ca38cd4032992840ec6c0b0cd2

Interactie die wordt ondersteund door de Video Image Viewer is activering van hotspots op desktopsystemen. Deze activering vindt plaats op klikapparaten en op aanraakapparaten met één tik.

De viewer is volledig toegankelijk via het toetsenbord.

Zie Toetsenbordtoegankelijkheid en -navigatie.

Interactieve afbeeldingsviewer insluiten section-6bb5d3c502544ad18a58eafe12a13435

De interactieve beeldviewer is ingesloten in de hostpagina. Een dergelijke webpagina kan een statische lay-out hebben of kan "responsief" zijn en anders worden weergegeven op verschillende apparaten of voor verschillende venstergrootten in de browser.

Om aan deze behoeften tegemoet te komen, ondersteunt de viewer twee primaire bewerkingsmodi: insluiten met een vaste grootte en responsieve insluiting.

Insluitmodus van vaste grootte en responsieve ontwerpinsluitmodus

In de ingesloten modus wordt de viewer toegevoegd aan de bestaande webpagina. Deze webpagina heeft mogelijk al inhoud van een klant die geen betrekking heeft op de viewer. De viewer neemt doorgaans slechts een deel van het onroerend goed van een webpagina in beslag.

De meest gebruikte gevallen 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 het laden. Deze methode is de beste keuze voor webpagina's met een statische indeling.

Bij insluiten van responsieve ontwerpen wordt ervan uitgegaan dat de viewer tijdens 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.

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 functionaliteit 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 kaders van de lay-out van het Webontwerp zoals Bootstrap en Stichting gebruiken.

Anders, als de Web-pagina zowel de breedte als de hoogte voor de container van de kijker plaatst DIV, vult de viewer alleen dat gebied. De pagina volgt ook de grootte die de webpaginalay-out biedt. Een goed voorbeeld is het insluiten van de viewer in een modale overlay, waarbij de grootte van de overlay wordt aangepast aan de venstergrootte van de webbrowser.

Insluiten met vaste grootte

U voegt de viewer als volgt toe aan een webpagina:

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/js/InteractiveImage.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="/etc/dam/viewers/s7viewers/html5/js/InteractiveImage.js"></script>

Responsief ontwerpinsluiting met onbeperkte hoogte

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 het vensterformaat van de webbrowser te nemen. En de hoogte blijft 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 toevoegen DIV de bestaande "holder" DIV. 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://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveImage.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 interactiveImage = new s7viewers.InteractiveImage({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg",
 "serverurl":"http://aodmarketingna.assetsadobe.com/is/image"
}
}).init();
</script>
</body>
</html>

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

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/InteractiveImage-responsive-unrestricted-height.html?lang=nl-NL

Flexibel formaat Insluiten met gedefinieerde breedte en hoogte

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 element aan 100 percenten.

<!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 het insluiten van responsieve lagen met onbeperkte hoogte. Het resulterende voorbeeld is het volgende:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveImage.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 interactiveImage = new s7viewers.InteractiveImage({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg",
 "serverurl":"http://aodmarketingna.assetsadobe.com/is/image"
}
}).init();
</script>
</body>
</html>

Insluiten met op setter gebaseerde API

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 met een vaste grootte met de op een setter gebaseerde API geïllustreerd:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveImage.js"></script>
<style type="text/css">
#s7viewer.s7interactiveimage {
 width: 1174px;
 height: 500px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var interactiveImage = new s7viewers.InteractiveImage();
interactiveImage.setContainerId("s7viewer");
interactiveImage.setParam("serverurl", "http://aodmarketingna.assetsadobe.com/is/image");
interactiveImage.setAsset("/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg");
interactiveImage.init();
</script>
</body>
</html>