Zooma zoom

Zoom Viewer är ett bildvisningsprogram som visar en zoombar bild. Visningsprogrammet fungerar med bilduppsättningar och navigeringen görs med hjälp av färgrutor. Den har zoomverktyg, helskärmsstöd, färgrutor och en valfri stängningsknapp. Den är utformad för att fungera på stationära datorer och mobila enheter.

NOTE
Bilder som använder IR (Image Rendering) eller UGC (User-Generated Content) stöds inte av det här visningsprogrammet.

Visningstyp 502.

Se Systemkrav och krav.

Demo-URL section-e1c3106f5b3e445d9b95be337c2f94e2

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

Använda Zoom Viewer section-e6c68406ecdc4de781df182bbd8088b4

Zoom Viewer representerar en JavaScript-huvudfil och en uppsättning hjälpfiler (en enda JavaScript-fil innehåller alla Viewer SDK-komponenter som används av det här visningsprogrammet, resurser, CSS) som hämtats av visningsprogrammet under körning.

Du kan använda Zoom 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 Zoom Viewer section-642e66ca38cd4032992840ec6c0b0cd2

Zoom Viewer stöder följande pekgester som är vanliga i andra mobilprogram. När visningsprogrammet inte kan bearbeta användarens svepningsgest vidarebefordrar det händelsen till webbläsaren för att utföra den inbyggda sidrullningen. Den här typen av funktioner gör att användaren kan navigera på sidan även om användaren upptar större delen av enhetens skärmområde.

Gesture
Beskrivning
Enkeltryckning
Väljer ny miniatyrbild i färgrutor. I huvudvyn döljs eller visas element i användargränssnittet.
Dubbelknacka
Zoomar in en nivå tills maximal förstoring nås. Nästa dubbelknackningsgest återställer visningsprogrammet till det inledande visningsläget.
Knipning
Zoomar in eller ut.
Vågrät dragning eller snärtning

Bläddrar igenom listan med färgrutor i färgrutefältet.

Om bilden är i ett återställningsläge och ramövergång är inställd på att bildruta, resursen ändras med bildruteanimeringen. För andra ramövergång -lägen, utför gesten intern sidbläddring.

Om bilden zoomas in flyttas den vågrätt. Om bilden flyttas till vykanten och en svepning utförs i samma riktning, utför gesten intern sidbläddring.

Lodrät dragning

Om bilden är i ett återställningsläge utför gesten intern sidbläddring.

När bilden har zoomats in flyttas den vertikalt. Om bilden flyttas till vykanten och en svepning utförs i samma riktning, utför gesten den inbyggda sidrullningen.

Om gesten görs i färgruteområdet utförs en inbyggd sidrullning.

Visningsprogrammet stöder 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 åtkomligt via tangentbordet.

Se Tangentbordstillgänglighet och -navigering.

Bädda in Zoom 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 layout, 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 enhetens orientering ändras.

Det här 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-åtgärdsläget. Sidan HTML som är klar att användas kallas ZoomViewer.html och den finns under html5/ undermappen till din standarddistribution av IS-Viewer enligt följande:

<s7viewers_root>/html5/ZoomViewer.html

Använd anpassad CSS för att få ett anpassat utseende på sidan.

Följande är ett exempel på HTML som öppnar visningsprogrammet i det nya fönstret:

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

Om inbäddningsläge med fast storlek och responsivt designinbäddningsläge

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 upptar normalt bara en del av webbsidans fastighet.

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

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

Inbäddningsläget för responsiv design förutsätter att det är nödvändigt att ändra storlek på visningsprogrammet under körningen på grund av storleksändringen för visningsprogrammets behållare DIV. Det vanligaste användningsområdet är att lägga till ett visningsprogram på en webbsida som använder en flexibel layout.

I läget responsiv designinbäddning beter sig visningsprogrammet olika beroende på hur webbsidan ändrar storlek på sin behållare DIV. Om webbsidan bara anger behållarens bredd DIV, utan att begränsa höjden, väljer visningsprogrammet automatiskt höjden enligt proportionerna för den resurs som används. Den här logiken gör att resursen passar in perfekt i vyn utan utfyllnad på sidorna. Det här användningsexemplet är det vanligaste för webbsidor som använder responsiva layoutramverk som Bootstrap och Foundation.

Om webbsidan anger både bredd och höjd för visningsprogrammets behållare DIV, fyller visningsprogrammet det området och följer den storlek som webbsidan ger. Om du till exempel bäddar in visningsprogrammet i en modal övertäckning, där storleken på övertäckningen anpassas efter webbläsarens fönsterstorlek.

Inbäddning med fast storlek section-44f365e6c0dd40709467a459afa82a7f

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

  1. Lägga till JavaScript-filen för visningsprogrammet på webbsidan.

  2. Definierar behållar-DIV.

  3. Anger visningsprogrammets storlek.

  4. Skapa och initiera visningsprogrammet.

  5. Lägga till JavaScript-filen för visningsprogrammet på webbsidan.

    Om du vill skapa ett visningsprogram måste du lägga till en script-tagg i huvudet HTML. Innan du kan använda visningsprogrammets API måste du se till att du inkluderar ZoomViewer.js. The ZoomViewer.js filen finns under html5/js/ undermapp till din standarddistribution av IS-Viewer:

<s7viewers_root>/html5/js/ZoomViewer.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/ZoomViewer.js"></script>
NOTE
Referera endast till JavaScript för huvudvisningsprogrammet include på sidan. Referera inte till några ytterligare JavaScript-filer i webbsideskoden som kan hämtas av visningsprogrammets logik under körning. Ange särskilt inte direkt HTML5 SDK Utils.js biblioteket som läses in av visningsprogrammet från /s7viewers kontextsökväg (så kallad konsoliderad SDK) include). Orsaken är att platsen för Utils.js eller liknande visningsprogrambibliotek för miljön hanteras helt av visningsprogrammets logik och platsen ändras mellan visningsprogramversionerna. Adobe har inte äldre versioner av sekundära visningsprogram includes på servern.
Det innebär att du skickar en direkt referens till valfritt sekundärt JavaScript include som används av visningsprogrammet på sidan avbryter visningsprogrammets funktioner i framtiden när en ny produktversion distribueras.
  1. Definierar behållar-DIV.

    Lägg till ett tomt DIV-element på sidan där du vill att visningsprogrammet ska visas. DIV-elementet måste ha sitt ID definierat eftersom detta ID skickas senare till visningsprogrammets API.

    Platshållarens DIV är ett positionerat element, vilket innebär att position CSS-egenskapen är inställd på relative eller absolute.

    Följande är ett exempel på ett definierat DIV-platshållarelement:

    code language-html
    <div id="s7viewer" style="position:relative"></div>
    
  2. Anger visningsprogrammets storlek.

    I det här visningsprogrammet visas miniatyrbilder när du arbetar med uppsättningar med flera objekt. Miniatyrbilder för skrivbordssystem placeras under huvudvyn. Samtidigt tillåter visningsprogrammet att huvudresursen byts ut i körningsmiljön med setAsset() API. Som utvecklare har du kontroll över hur visningsprogrammet hanterar miniatyrbildsområdet längst ned när den nya resursen bara har ett objekt. Det går att behålla den yttre visningsstorleken intakt och låta huvudvyn öka höjden och ta upp miniatyrbildområdet. Eller så kan du hålla storleken på huvudvyn statisk och komprimera det yttre visningsområdet, låta webbsidans innehåll röra sig uppåt och använda friskärmsutrymme från miniatyrbilderna.

    Om du vill behålla de yttre gränserna för visningsprogrammet definierar du storleken för .s7zoomviewer CSS-klass på översta nivån i absoluta enheter. Storleksändring i CSS kan placeras direkt på HTML-sidan. Den kan också läggas i en anpassad CSS-fil för visningsprogrammet, som senare tilldelas en post för visningsförinställningar i Dynamic Media Classic eller skickas explicit med ett formatkommando.

    Se Anpassa Zoom Viewer om du vill ha mer information om hur du formaterar visningsprogrammet med CSS.

    Följande är ett exempel på hur du definierar en statisk storlek för yttre visningsprogram på HTML-sidan:

    code language-html
    #s7viewer.s7zoomviewer {
     width: 640px;
     height: 480px;
    }
    

    Du kan se beteendet med ett fast yttre visningsprogram i följande exempel. Observera att storleken på det yttre visningsprogrammet inte ändras när du växlar mellan uppsättningar:

    https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/zoom/ZoomViewer-fixed-outer-area.html?lang=sv-SE

    Om du vill göra huvudvyns dimensioner statiska definierar du visningsprogrammets storlek i absoluta enheter för den inre Container SDK-komponent med .s7zoomviewer .s7container CSS-väljare, eller genom att använda stagesize modifierare.

    Följande är ett exempel på hur du definierar visningsstorleken för den inre Container SDK-komponenten så att huvudvisningsområdet inte ändrar storlek när du byter resurs:

    code language-html
    #s7viewer.s7zoomviewer .s7container {
     width: 640px;
     height: 480px;
    }
    

    På följande demosida visas visningsprogrammets beteende med en fast storlek för huvudvyn. Observera att när du växlar mellan uppsättningar förblir huvudvyn statisk och webbsidans innehåll flyttas lodrätt.

    https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/zoom/ZoomViewer-fixed-main-view.html?lang=sv-SE

    Du kan ange stagesize modifierare i posten för visningsförinställning i Dynamic Media Classic. Eller så kan du skicka det explicit med visningsprogrammets initieringskod med params samling eller som ett API-anrop enligt beskrivningen i kommandoreferensavsnittet i den här hjälpen, som i följande exempel:

    code language-html
     zoomViewer.setParam("stagesize",
    "640,480");
    

    En CSS-baserad metod rekommenderas och används i det här exemplet.

  3. Skapa och initiera visningsprogrammet.

    När du har slutfört stegen ovan skapar du en instans av s7viewers.ZoomViewer -klass, skicka all konfigurationsinformation till konstruktorn och anropa init() -metod i en visningsprograminstans.

    Konfigurationsinformation skickas till konstruktorn som ett JSON-objekt. Objektet bör åtminstone ha containerId fält som innehåller namnet på visningsprogrammets behållar-ID och kapslat params JSON-objekt med konfigurationsparametrar som visningsprogrammet stöder. I det här fallet params objektet måste ha minst URL för bildserver som skickas som serverUrl egenskap och den ursprungliga tillgången som asset parameter. Med det JSON-baserade initierings-API:t kan du skapa och starta visningsprogrammet med en enda kodrad.

    Det är viktigt att lägga till visningsprogrambehållaren i DOM så att visningsprogramkoden kan hitta behållarelementet med dess ID. I vissa webbläsare fördröjs skapandet av DOM tills webbsidan är slut. För maximal kompatibilitet, ring init() metod precis före stängning BODY eller på brödtexten onload() -händelse.

    Samtidigt behöver behållarelementet inte nödvändigtvis vara en del av webbsidans layout ännu. Den kan till exempel vara dold med display:none format som tilldelats det. I det här fallet skjuter visningsprogrammet upp initieringsprocessen tills webbsidan återför behållarelementet till layouten. När den här åtgärden utförs återtas visningsprogrammet automatiskt.

    Följande är ett exempel på hur du skapar en visningsprograminstans, skickar de minsta nödvändiga konfigurationsalternativen till konstruktorn och anropar init() -metod. Det här exemplet förutsätter zoomViewer är visningsprograminstansen, s7viewer är namnet på platshållaren DIV, http://s7d1.scene7.com/is/image/ är webbadressen för bildvisning, och Scene7SharedAssets/ImageSet-Views-Sample är tillgången.

    code language-html
    <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>
    

    Följande kod är ett komplett exempel på en enkel webbsida som bäddar in Video Viewer med fast storlek:

    code language-html
    <!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({
     "containerId":"s7viewer",
    "params":{
     "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
     "serverurl":"http://s7d1.scene7.com/is/image/"
    }
    }).init();
    </script>
    </body>
    </html>
    

Responsiv designinbäddning med obegränsad höjd section-b9ca11a7e7aa4f74ab43244cbca37ae0

Med responsiv designinbäddning har webbsidan normalt någon typ av flexibel layout som bestämmer visningsprogrammets körningsstorlek DIV. I följande exempel antar du att webbsidan tillåter visningsprogrammets behållare DIV för att ta 40 % av webbläsarens fönsterstorlek och låta dess höjd vara obegränsad. 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 stegen för inbäddning med fast storlek. Den enda skillnaden är att du inte behöver definiera visningsprogrammets storlek explicit.

  1. Lägga till JavaScript-filen för visningsprogrammet på webbsidan.
  2. Definierar behållar-DIV.
  3. Skapa och initiera visningsprogrammet.

Alla steg ovan är desamma som med inbäddning med fast storlek. Lägg till behållar-DIV till befintlig "holder" DIV. Följande kod är ett komplett exempel. Lägg märke till 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="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>

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

Live Demos

Bädda in i flexibel storlek med bredd och höjd definierad section-3674e6c032594441a6576b7fb1de6e64

Om det finns inbäddning i flexibel storlek med angiven bredd och höjd är webbsidans format annorlunda. Det ger båda storlekarna till "holder" DIV och centrera det i webbläsarfönstret. Dessutom anger webbsidan storleken på HTML och BODY -element till 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>

Resten av inbäddningsstegen är identiska med stegen som används för responsiv designinbäddning med obegränsad höjd. Följande exempel visas:

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

Bädda in med hjälp av set-based API section-44e014925f24418b900696003855c0a9

I stället för att använda JSON-baserad initiering kan du använda set-based API och no-args-konstruktor. Den här API-konstruktorn tar inga parametrar och konfigurationsparametrar anges med setContainerId(), setParam()och setAsset() API-metoder med separata JavaScript-anrop.

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

<!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>
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8