Experience League

Exit search

內聯縮放

內聯縮放查看器是影像查看器。當用戶滾動或觸碰主視圖時，它將顯示靜態影像，並將縮放版本顯示在該靜態影像上。此查看器可與影像集配合使用，並使用色板完成導航。它設計用於台式機和移動設備。

注意

此查看器不支援使用IR（影像呈現）或UGC（用戶生成的內容）的影像。

查看器類型為504。

請參閱系統要求和先決條件。

演示URL

https://s7d9.scene7.com/s7viewers/html5/FlyoutViewer.html?asset=Scene7SharedAssets/ImageSet-Views-Sample&config=Scene7SharedAssets/Universal_HTML5_Zoom_Inline&stagesize=500,400

使用內聯縮放查看器

內聯縮放查看器表示主JavaScript檔案和一組幫助程式檔案（單個JavaScript包含此特定查看器、資產、CSS使用的所有查看器SDK元件），該查看器在運行時下載。

內聯縮放查看器既可以使用隨影像服務查看器提供的生產就緒HTML頁在彈出模式下使用，也可以在使用文檔化API將其整合到目標網頁的嵌入式模式下使用。

配置和外觀與其他查看器類似。可以使用自定義CSS應用外觀。

請參閱所有查看器通用的命令引用 — 配置屬性和所有查看器通用的命令引用 — URL

與內聯縮放查看器交互

內聯縮放查看器支援其他移動應用程式中常見的單點觸控和多點觸控手勢。

手勢	說明
按一下	激活色板中主縮放級別和次縮放級別之間的浮出視圖或更改，選擇新縮略圖。
水準輕掃或輕拂	在色板欄中滾動色板清單。
垂直滑動	如果手勢是在色板區域內完成的，則它將執行本機頁面滾動。

該查看器還支援Windows設備上的觸摸輸入和滑鼠輸入，包括觸摸屏和滑鼠。但是，此支援僅限於Chrome、Internet Explorer 11和Edge Web瀏覽器。

此查看器可完全以鍵盤方式訪問。

請參閱鍵盤輔助功能和導航。

嵌入內聯縮放查看器

不同的網頁對查看者行為有不同的需求。有時，網頁提供可點擊的連結，在單獨的瀏覽器窗口中開啟查看器。在其它情況下，可能需要將查看器直接嵌入到托管頁面中。在後一種情況下，網頁可具有靜態頁面佈局，或使用在不同設備上顯示不同的響應設計，或對不同的瀏覽器窗口大小。為滿足這些需要，查看器支援三種主要操作模式：彈出式、固定大小嵌入和響應性嵌入。

彈出

在彈出模式下，在單獨的Web瀏覽器窗口或頁籤中開啟查看器。它會佔用整個瀏覽器窗口區域，並在調整瀏覽器窗口大小或更改設備方向時進行調整。

此模式是移動設備中最常見的模式。網頁使用 window.open() JavaScript調用，正確配置 A HTML元素，或任何其它合適的方法。

建議您使用現成HTML頁面來管理名為 FlyoutViewer.html。位於 html5/ 標準Image Serving-Viewers部署的子資料夾：

<s7viewers_root>/html5/FlyoutViewer.html

還必須將FlyoutZoomView元件配置為在串聯縮放模式下工作。建議您使用現成的 Scene7SharedAssets/Universal_HTML5_Zoom_Inline 「內聯縮放」查看器的預設，或從中派生的自定義預設。通過應用自定義CSS實現可視化定製。

下面是一個HTML代碼示例，它在新窗口中開啟查看器：

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

固定尺寸嵌入與響應嵌入

在嵌入式模式下，查看器被添加到現有網頁中，該網頁可能已經具有與查看器無關的一些客戶內容。瀏覽器通常只佔網頁房地產的一部分。

主要使用案例是面向台式機或平板電腦設備的網頁，以及響應性網頁，這些網頁根據設備類型自動調整佈局。

當查看器在初始載入後不更改其大小時，使用固定大小嵌入模式。此選項最適合具有靜態頁面佈局的網頁。

響應性設計嵌入模式假定查看器必須在運行時調整大小以響應其容器的大小變化 DIV。最常見的用例是向使用靈活頁面佈局的網頁添加查看器。

在內聯縮放查看器中使用響應設計嵌入模式時，請確保使用 imagereload 的下界。理想情況下，按照網頁CSS的要求將斷點與查看器寬度斷點匹配。

在響應性設計嵌入模式中，觀看者根據網頁容器的方式不同地工作 DIV 大小。如果網頁僅設定容器的寬度 DIV在保持其高度不受限制的情況下，觀看者根據所使用資產的縱橫比自動選擇其高度。此功能意味著該資產完全適合視圖，而不會在側面出現任何填充。對於使用響應性設計佈局框架(如Bootstrap或基礎)的網頁，此特定用例最常見。

否則，如果網頁為查看者的容器設定寬度和高度 DIV，則查看器將僅填充該區域並遵循網頁佈局提供的大小。一個很好的使用案例示例是將查看器嵌入到模式覆蓋中，其中覆蓋根據Web瀏覽器窗口大小進行大小調整。

固定大小嵌入

通過執行以下操作，可將查看器添加到網頁：

將查看器JavaScript檔案添加到網頁。
定義容器 DIV。
設定查看器大小。
建立和初始化查看器。
將查看器JavaScript檔案添加到網頁。

建立查看器要求在HTML頭中添加指令碼標籤。在使用查看器API之前，請確保包括 FlyoutViewer.js。 FlyoutViewer.js 在以下 html5/js/ 標準IS查看器部署的子資料夾：

<s7viewers_root>/html5/js/FlyoutViewer.js

如果查看器部署在AdobeDynamic Media伺服器之一上，並且從同一域提供服務，則可以使用相對路徑。否則，您將指定一個AdobeDynamic Media伺服器（安裝了IS-Viewers）的完整路徑。

相對路徑如下所示：

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

注意

僅引用主查看器JavaScript include 檔案。不要引用網頁代碼中任何可能在運行時由查看器邏輯下載的附加JavaScript檔案。特別是，不直接引用HTML5 SDK Utils.js 由查看器從 /s7viewers 上下文路徑（所謂統一SDK） include)。原因是 Utils.js 或類似的運行時查看器庫由查看器的邏輯和查看器版本之間的位置更改進行完全管理。 Adobe不保留舊版次查看器 includes 在伺服器上。

因此，直接引用任何輔助JavaScript include 該頁面上的查看器使用的瀏覽器功能將在部署新產品版本時中斷查看器功能。

定義容器DIV。

將空的DIV元素添加到希望查看器顯示的頁面。 DIV元素必須定義其ID，因為此ID稍後會傳遞給查看器API。

佔位符DIV是定位元素，表示 position CSS屬性設定為 relative 或 absolute。

指定適當的 z-index 。這樣可確保查看器的彈出部分顯示在其它網頁元素的頂部。

以下是定義的佔位符DIV元素的示例：
```
<div id="s7viewer" style="position:relative;z-index:1"></div>
```
設定查看器大小。

此查看器在處理多項集時顯示縮略圖。在案頭系統上，縮略圖放在主視圖下方。同時，觀看者允許在運行時使用主資產的交換 setAsset() API。作為開發人員，當新資產只有一個項目時，您可以控制查看者如何管理底部區域的縮略圖區域。可以保持外部查看器大小不變，並讓主視圖增加其高度並佔用縮略圖區域。或者，您可以保持主視圖大小靜態並折疊外部查看器區域，讓網頁內容向上移動，然後使用縮略圖中剩餘的可用頁面空間。

要保持外部查看器邊界不變，請定義 .s7flyoutviewer 以絕對單位表示的頂級CSS類。 CSS中的大小調整可以放在HTML頁或自定義查看器CSS檔案中，稍後分配給Dynamic Media Classic的查看器預設記錄，或使用style命令顯式傳遞。

請參閱自定義內聯縮放查看器的子菜單。

以下是在HTML頁中定義靜態外部查看器大小的示例：
```
#s7viewer.s7flyoutviewer {
 width: 640px;
 height: 480px;
}
```
您可以在以下示例頁面上看到具有固定外部查看器區域的行為。請注意，在集之間切換時，外部查看器大小不會改變：

https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/inlinezoom/InlineZoom-fixed-outer-area.html?lang=zh-Hant?lang=zh-Hant

要使主視圖尺寸保持靜態，請為內部定義以絕對單位表示的查看器尺寸 Container SDK元件使用 .s7flyoutviewer .s7container CSS選擇器。此外，您應覆蓋為 .s7flyoutviewer 將預設查看器CSS中的頂級CSS類設定為 auto。

以下是定義內部查看器大小的示例 Container SDK元件，以便在切換資產時主視圖區域不更改其大小：
```
#s7viewer.s7flyoutviewer {
 width: auto;
 height: auto;
}
#s7viewer.s7flyoutviewer .s7container {
 width: 640px;
 height: 480px;
}
```
以下示例頁顯示具有固定主視圖大小的查看器行為。請注意，在集之間切換時，主視圖保持靜態，網頁內容垂直移動：

https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/inlinezoom/InlineZoom-fixed-main-view.html?lang=zh-Hant?lang=zh-Hant

此外，預設查看器CSS為其外部區域提供固定大小。
建立和初始化查看器。

完成上述步驟後，將建立 s7viewers.FlyoutViewer 類，將所有配置資訊傳遞給其建構子和調用 init() 的子常式。配置資訊作為JSON對象傳遞給建構子。至少，此對象應具有 containerId 包含查看器容器ID和嵌套名稱的欄位 params JSON對象及其查看器支援的配置參數。在這個例子中， params 對象必須至少將Image Serving URL傳遞為 serverUrl 財產；初始資產 asset 參數，將CSS載入為 contentUrl 參數和預設名稱 config 的下界。基於JSON的初始化API允許您使用單行代碼建立和啟動查看器。

必須將查看器容器添加到DOM中，以便查看器代碼可以通過其ID查找容器元素。某些瀏覽器將生成DOM延遲到網頁結束。要獲得最大相容性，請調用 init() 方法 BODY 標籤，或者身上 onload() 的子菜單。

同時，容器元素還不一定是網頁佈局的一部分。例如，它可能隱藏在 display:none 指定的樣式。在這種情況下，查看器將其初始化過程延遲到網頁將容器元素帶回佈局的那一刻。當此操作發生時，查看器載入將自動恢復。

以下是建立查看器實例的示例，將最小必要配置選項傳遞給建構子，並調用 init() 的雙曲餘切值。該示例假定 inlineZoomViewer 是查看器實例； s7viewer 是佔位符的名稱 DIV; http://s7d1.scene7.com/is/image/ 是影像服務URL;和 Scene7SharedAssets/ImageSet-Views-Sample 是資產：
```
<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/"
}
}).init();
</script>
```
以下代碼是嵌入具有固定大小的內聯縮放查看器的普通網頁的完整示例：
```
<!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({
 "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/"
}
}).init();
</script>
</body>
</html>
```

具有無限制高度的響應設計嵌入

通過響應性設計嵌入，網頁通常具有某種靈活的佈局，其指示查看者容器的運行時大小 DIV。對於以下示例，假定該網頁允許查看者的容器 DIV 以取Web瀏覽器窗口大小的40%，使其高度不受限制。網頁HTML代碼如下所示：

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

將查看器添加到此頁麵類似於固定大小嵌入的步驟。唯一的區別是，必須覆蓋預設查看器CSS的固定大小，其大小以相對單位設定。

將查看器JavaScript檔案添加到網頁。
定義容器 DIV。
設定查看器大小。
建立和初始化查看器。

以上所有步驟與固定大小嵌入步驟相同，但有以下三個例外：

添加容器 DIV 持有人」 DIV;
添加 imagereload 具有顯式斷點的參數；
而不是使用絕對單位設定固定查看器大小，使用設定查看器的CSS width 和 height 至100%，如下所示：

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

以下代碼是一個完整的示例。注意在調整瀏覽器大小時查看器大小如何變化，以及查看器縱橫比如何與資產匹配。

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

以下示例頁說明了具有無限制高度的響應設計嵌入在現實生活中的更多用途：

即時演示

備用演示位置

定義寬度和高度的柔性尺寸嵌入

如果定義了寬度和高度的靈活大小嵌入，則網頁樣式會有所不同。它為 "holder" DIV並將其居中到瀏覽器窗口中。此外，網頁還設定 HTML 和 BODY 元素到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>

其餘嵌入步驟與用於具有無限制高度的響應設計嵌入的步驟相同。結果示例如下：

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

使用基於Setter的API嵌入

可以不使用基於JSON的初始化，而是使用基於setter的API和no-args建構子。使用此API建構子不採用任何參數，配置參數是使用 setContainerId()。 setParam(), setAsset() API方法，具有單獨的JavaScript調用。

以下示例說明了將固定大小嵌入與基於setter的API一起使用：

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

Business.Adobe.com資源

Ecommerce Integrations Personalized Communications Version History Customer Experience Management Digital Asset Management Digital Signage

全新的改善搜尋

內聯縮放

演示URL

使用內聯縮放查看器

與內聯縮放查看器交互

嵌入內聯縮放查看器

具有無限制高度的響應設計嵌入

定義寬度和高度的柔性尺寸嵌入

使用基於Setter的API嵌入

Business.Adobe.com資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe