eCatalog ecatalog

eCatalog Viewer är ett visningsprogram för en katalog som visar elektroniska broschyrer på uppslag eller sida för sida. Med eCatalog kan användare navigera i katalogen med hjälp av ytterligare element i användargränssnittet eller dedikerat miniatyrläge. Användarna kan också zooma in på alla sidor för att få bättre detaljer.

Visningstyp 507.

Se Systemkrav och krav.

Det här visningsprogrammet fungerar med kataloger och har stöd för valfria bildscheman och verktyg för delning via sociala medier. Den har zoomverktyg, katalognavigeringsverktyg, helskärmsstöd, miniatyrbilder och en valfri stängningsknapp. Visningsprogrammet har också stöd för verktyg för delning via sociala medier, utskrift, hämtning och Favoriter. Den är utformad för att fungera på stationära datorer och mobila enheter.

Demo-URL section-e1c3106f5b3e445d9b95be337c2f94e2

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

Använda eCatalog Viewer section-e6c68406ecdc4de781df182bbd8088b4

eCatalog Viewer representerar en JavaScript-huvudfil och en uppsättning hjälpfiler (en enda JavaScript-komponent med alla SDK-komponenter för visningsprogrammet som används av det här visningsprogrammet, resurser, CSS) som hämtats av visningsprogrammet under körning

Du kan använda eCatalog Viewer i popup-läge med en produktionsklar HTML-sida som finns i IS-Viewer eller i inbäddat läge, där den integreras med målwebbsidan med dokumenterat API.

Konfigurationen och skalningen liknar den för andra visningsprogram. All skalning görs med anpassad CSS.

Se Kommandoreferens som är gemensam för alla visningsprogram - Konfigurationsattribut och Kommandoreferens som är gemensam för alla visningsprogram - URL

Interagera med eCatalog Viewer section-642e66ca38cd4032992840ec6c0b0cd2

eCatalog Viewer stöder följande pekgester som är vanliga i andra mobilprogram.

Det går att aktivera en realistisk animeringseffekt för bläddring mellan katalogsidor. I så fall kan användaren hålla ned och dra ett sidhörn och vända på sidan.

Det här visningsprogrammet har även stöd för både pekrörelser och musindata på Windows-enheter med pekskärm och mus. Detta stöd är dock begränsat till webbläsarna Chrome, Internet Explorer 11 och Edge.

Visningsprogrammet är fullt tillgängligt för tangentbordet, vilket beskrivs i Tangentbordstillgänglighet och navigering.

Delningsverktyg för sociala medier med eCatalog Viewer section-eb575084a99647c3a9591f439f40b412

eCatalog Viewer har stöd för verktyg för delning via sociala medier. De är tillgängliga som en knapp i huvudkontrollfältet som utökas till ett delningsverktygsfält när en användare klickar eller trycker på den.

Delningsverktygsfältet innehåller ikoner för varje typ av delningskanal som stöds, som Facebook, Twitter, e-postdelning, inbäddning av koddelning och länkdelning. När verktygen för e-postdelning, inbäddning eller länkdelning är aktiverade visas en modal dialogruta med ett motsvarande inmatningsformulär. När Facebook eller Twitter anropas omdirigeras användaren till en standarddelningsdialogruta från en social tjänst. Delningsverktygen är inte tillgängliga i helskärmsläge på grund av säkerhetsbegränsningar i webbläsaren.

Bädda in eCatalog Viewer section-6bb5d3c502544ad18a58eafe12a13435

Olika webbsidor har olika behov av visningsprogrammets beteende. Ibland innehåller en webbsida en länk som, när den är markerad, öppnar visningsprogrammet i ett separat webbläsarfönster. I andra fall är det nödvändigt att bädda in visningsprogrammet direkt på värdsidan. I det senare fallet kan webbsidan ha en statisk sidlayout, eller använda responsiv design som visas på olika enheter eller för olika webbläsarfönsterstorlekar. För att tillgodose dessa behov har visningsprogrammet stöd för tre primära åtgärdslägen: popup-fönster, inbäddning med fast storlek och responsiv designinbäddning.

Om popup-läge

I popup-läge öppnas visningsprogrammet i ett separat webbläsarfönster eller på en separat flik. Det tar hela webbläsarfönsterområdet och justeras om webbläsaren ändrar storlek eller om en mobilenhets orientering ändras.

Popup-läget är det vanligaste för mobila enheter. Webbsidan läser in visningsprogrammet med window.open() JavaScript-anrop, korrekt konfigurerat A HTML-element eller någon annan lämplig metod.

Vi rekommenderar att du använder en färdig HTML-sida för popup-läge. I det här fallet kallas den eCatalogViewer.html och finns i undermappen html5/ i din standarddistribution av IS-Viewer:

<s7viewers_root>/html5/eCatalogViewer.html

Du kan anpassa visuellt genom att använda anpassad CSS.

Här följer ett exempel på HTML som öppnar visningsprogrammet i ett nytt fönster:

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

Om inbäddningsläge med fast storlek och inbäddningsläge för responsiv design

I det inbäddade läget läggs visningsprogrammet till på den befintliga webbsidan, som kanske redan har kundinnehåll som inte är relaterat till visningsprogrammet. Visningsprogrammet tar normalt bara upp en del av en webbsidas fastighet.

De viktigaste användningsområdena är webbsidor som är orienterade för datorer eller surfplattor, och även responsiva designade sidor som automatiskt anpassar layouten beroende på enhetstyp.

Inbäddning med fast storlek används när visningsprogrammet inte ändrar sin storlek efter den första inläsningen. Den här metoden är det bästa alternativet för webbsidor som har en statisk layout.

Inbäddning av responsiv design förutsätter att visningsprogrammet måste ändra storlek vid körning som svar på storleksändringen för behållaren DIV. Det vanligaste användningsområdet är att lägga till ett visningsprogram på en webbsida som använder en flexibel sidlayout.

I läget responsiv designinbäddning beter sig visningsprogrammet olika beroende på hur webbsidan ändrar storleken på behållaren DIV. Om webbsidan bara anger bredden på behållaren DIV, och dess höjd inte begränsas, väljer visningsprogrammet automatiskt höjden enligt proportionerna för resursen som används. Med den här funktionen kan du vara säker på att resursen passar perfekt in i vyn utan utfyllnad på sidorna. Det här användningsexemplet är det vanligaste för webbsidor med responsiva layoutramverk som Bootstrap och Foundation.

Om webbsidan ställer in både bredd och höjd för visningsprogrammets behållare DIV fyller visningsprogrammet bara det området och följer den storlek som anges i webbsidans layout. Ett bra exempel är att bädda in visningsprogrammet i en modal övertäckning, där storleken på övertäckningen anpassas efter webbläsarens fönsterstorlek.

Inbäddning med fast storlek

Du lägger till visningsprogrammet på en webbsida genom att göra följande:

<s7viewers_root>/html5/js/eCatalogViewer.js

Du kan använda en relativ sökväg om visningsprogrammet distribueras på någon av Adobe Dynamic Media Classic-servrarna och den hanteras från samma domän. Annars anger du en fullständig sökväg till en av Adobe Dynamic Media Classic-servrarna som har IS-Viewer installerat.

Den relativa sökvägen ser ut så här:

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

Responsiv designinbäddning med obegränsad höjd

Med responsiv designinbäddning har webbsidan vanligtvis någon typ av flexibel layout på plats som bestämmer körningsstorleken för visningsprogrammets behållare DIV. I det här exemplet antar du att webbsidan tillåter att visningsprogrammets behållare DIV tar 40 % av webbläsarens fönsterstorlek, och lämnar dess höjd obegränsad. Den resulterande webbsidans HTML-kod ser ut så här:

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

Att lägga till visningsprogrammet på en sådan sida liknar inbäddning med fast storlek, men den enda skillnaden är att du inte behöver definiera visningsprogrammets storlek explicit.

Alla stegen ovan är desamma som vid inbäddning med fast storlek. Lägg till behållaren DIV i den befintliga "-hållaren" DIV. Följande kod är ett komplett exempel. Du kan se hur visningsprogrammets storlek ändras när webbläsarens storlek ändras och hur visningsprogrammets proportioner matchar resursen.

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

Följande exempelsida visar mer verkliga användningsområden för responsiv designinbäddning med obegränsad höjd:

Livedemonstrationer

Bädda in flexibel storlek med angiven bredd och höjd

Vid inbäddning i flexibel storlek med definierad bredd och höjd är webbsidans format annorlunda. Det innebär att den ger både storlekar för " hållaren" DIV och centrerar den i webbläsarfönstret. Webbsidan anger också storleken på elementen HTML och BODY till 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 återstående inbäddningsstegen är identiska med responsiv designinbäddning med obegränsad höjd. Följande exempel visas:

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

Bädda in med Setter-baserat API

I stället för att använda JSON-baserad initiering är det möjligt att använda set-based API och no-args-konstruktor. Med den API-konstruktorn tar inga parametrar och konfigurationsparametrar anges med API-metoderna setContainerId(), setParam() och setAsset() med separata JavaScript-anrop.

I följande exempel visas inbäddning med fast storlek med set-based API:

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