eCatalog ecatalog

eCatalog Viewer is een catalogusviewer die elektronische brochures in een spread per spread of pagina per pagina weergeeft. Met de eCatalog kunnen gebruikers door de catalogus navigeren met behulp van aanvullende gebruikersinterface-elementen of toegewijde miniatuurmodus. Gebruikers kunnen ook op elke pagina inzoomen voor meer informatie.

Viewer type 507.

Zie vereisten en eerste vereisten van het Systeem.

Deze viewer werkt met catalogi en ondersteunt optionele afbeeldingen met hyperlinks en gereedschappen voor sociaal delen. Deze bevat zoomgereedschappen, gereedschappen voor catalogusnavigatie, ondersteuning voor volledig scherm, miniaturen en een optionele knop Sluiten. De viewer ondersteunt ook gereedschappen voor sociaal delen, Afdrukken, Downloaden en Favorieten. Het is ontworpen voor gebruik op desktops en mobiele apparaten.

Demo-URL section-e1c3106f5b3e445d9b95be337c2f94e2

https://s7d1.scene7.com/s7viewers/html5/eCatalogViewer.html?asset=Viewers/Pluralist

De eCatalog Viewer gebruiken section-e6c68406ecdc4de781df182bbd8088b4

De eCatalog Viewer vertegenwoordigt een JavaScript-hoofdbestand en een set hulpbestanden (één JavaScript bevat alle Viewer SDK-componenten die door deze viewer worden gebruikt, elementen, CSS) die door de viewer in runtime zijn gedownload

U kunt de eCatalog Viewer in de pop-upmodus gebruiken met een HTML-pagina die klaar is voor productie en die wordt geleverd met IS-Viewers of in de ingesloten modus, waarbij deze viewer wordt geïntegreerd in de doelwebpagina met behulp van gedocumenteerde API.

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

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 eCatalog Viewer section-642e66ca38cd4032992840ec6c0b0cd2

De eCatalog Viewer ondersteunt de volgende aanraakbewegingen die ook in andere mobiele toepassingen worden gebruikt.

Het is mogelijk om een realistisch animatie-effect voor paginapijten in te schakelen voor het navigeren tussen cataloguspagina's. In dergelijke gevallen kan een gebruiker een paginahoek vasthouden en slepen en de pagina omdraaien.

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

Deze kijker is volledig toetsenbord toegankelijk zoals die in de toegankelijkheid en de navigatie van het Toetsenbordwordt beschreven.

Hulpprogramma's voor het delen van sociale media met eCatalog Viewer section-eb575084a99647c3a9591f439f40b412

De eCatalog Viewer ondersteunt gereedschappen voor sociale media. Ze zijn beschikbaar als een knop in de hoofdbesturingsbalk die wordt uitgevouwen tot een werkbalk voor delen wanneer een gebruiker erop klikt of erop tikt.

De werkbalk voor delen bevat pictogrammen voor elk type ondersteund kanaal voor delen, waaronder Facebook, Twitter, Delen via e-mail, delen via insluiten van code en delen van koppelingen. Wanneer gereedschappen voor delen via e-mail, insluiten of delen van koppelingen zijn geactiveerd, wordt in de viewer een modaal dialoogvenster weergegeven met een bijbehorend formulier voor gegevensinvoer. Wanneer Facebook of Twitter wordt aangeroepen, stuurt de viewer de gebruiker door naar een standaarddialoogvenster voor delen van een sociale service. Delen van gereedschappen is niet beschikbaar in de modus Volledig scherm vanwege beveiligingsbeperkingen van de webbrowser.

eCatalog Viewer 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 rechts insluiten op de hostpagina. In het laatste geval heeft de webpagina mogelijk een statische paginalay-out of wordt een responsief ontwerp gebruikt 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.

Ongeveer pop-up wijze

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 een mobiel apparaat wordt gewijzigd.

Pop-upmodus is de meest gebruikte voor mobiele apparaten. De webpagina laadt de viewer met window.open() JavaScript-aanroep, correct geconfigureerd A HTML-element of een andere geschikte methode.

Het wordt aanbevolen een HTML-pagina uit de doos te gebruiken voor de pop-upbewerkingsmodus. In dit geval wordt deze aangeroepen eCatalogViewer.html en bevindt deze zich in de submap html5/ van uw standaard IS-Viewers-implementatie:

<s7viewers_root>/html5/eCatalogViewer.html

U kunt visuele aanpassing bereiken door aangepaste CSS toe te passen.

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

<a href="https://s7d1.scene7.com/s7viewers/html5/eCatalogViewer.html?asset=Viewers/Pluralist" target="_blank">Open popup viewer</a>

Ongeveer vaste grootte inbeddende wijze en ontvankelijke ontwerp het inbedden wijze

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 onroerend goed van een 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 methode is de beste keuze voor webpagina's met een statische indeling.

Bij het insluiten van responsieve ontwerpen wordt ervan uitgegaan dat de viewer bij uitvoering 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 ontwerpinsluitingsmodus werkt de viewer anders, afhankelijk van de manier waarop de container van de webpagina wordt verkleind DIV . Als op de webpagina alleen de breedte van de container DIV wordt ingesteld en de hoogte onbeperkt blijft, kiest de viewer automatisch de hoogte op basis van de hoogte-breedteverhouding van het element dat wordt gebruikt. Deze functionaliteit zorgt ervoor dat het element perfect in de weergave past zonder opvulling aan de zijkanten. Dit gebruiksgeval komt het meest voor bij webpagina's die responsieve lay-outframeworks gebruiken, zoals Bootstrap en Foundation.

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

Vaste grootte het inbedden

U voegt de viewer als volgt toe aan een webpagina:

<s7viewers_root>/html5/js/eCatalogViewer.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/eCatalogViewer.js"></script>

Responsief ontwerp inbeddend met onbeperkte hoogte

Bij responsieve ontwerpinsluiting heeft de webpagina normaal gesproken een flexibele indeling die de runtimegrootte van de container van de viewer DIV bepaalt. In dit voorbeeld wordt ervan uitgegaan dat de webpagina de viewercontainer DIV in staat stelt 40% van de venstergrootte van de webbrowser in beslag te nemen, waarbij de hoogte onbeperkt blijft. De resulterende HTML-code voor webpagina's 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 lijkt op 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 het insluiten van een vaste grootte. Voeg de container DIV toe aan de bestaande aanduiding "" DIV . De volgende code is een volledig voorbeeld. U kunt zien 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="https://s7d1.scene7.com/s7viewers/html5/js/eCatalogViewer.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 eCatalogViewer = new s7viewers.eCatalogViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Viewers/Pluralist",
 "serverurl":"https://s7d1.scene7.com/is/image/"
}
}).init();
</script>
</body>
</html>

De volgende voorbeeldpagina illustreert hoe u in de praktijk meer gevallen kunt gebruiken van responsieve ontwerpinsluiting met onbeperkte hoogte:

Levende Demo's

Flexibele grootte die met bepaalde breedte en hoogte inbedt

In insluiten van flexibele grootte waarbij breedte en hoogte zijn gedefinieerd, is de opmaak van de webpagina anders. Dit betekent dat de aanduiding voor de aanduiding DIV beide grootten bevat en in het browservenster wordt gecentreerd. Bovendien stelt de webpagina de grootte van het element HTML en BODY in op 100%:

<!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 insluitstappen zijn identiek aan het reageren op ontwerpinsluiting met onbeperkte hoogte. Het resulterende voorbeeld is het volgende:

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

Inbeddend het Gebruiken van op zetter-Gebaseerde API

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

In het volgende voorbeeld wordt het insluiten van een vaste grootte met een setter-API getoond:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://s7d1.scene7.com/s7viewers/html5/js/eCatalogViewer.js"></script>
<style type="text/css">
#s7viewer.s7ecatalogviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var eCatalogViewer = new s7viewers.eCatalogViewer();
eCatalogViewer.setContainerId("s7viewer");
eCatalogViewer.setParam("serverurl", "https://s7d1.scene7.com/is/image/");
eCatalogViewer.setAsset("Viewers/Pluralist");
eCatalogViewer.init();
</script>
</body>
</html>