內嵌縮放

內嵌縮放檢視器是影像檢視器。當使用者翻轉或接觸主檢視時，會顯示靜態影像，且縮放版本會顯示在該靜態影像上。此檢視器可與影像集搭配使用，且導覽是使用色票完成。專為在桌上型電腦和行動裝置上運作而設計。

注意

此檢視器不支援使用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網頁瀏覽器。

此查看器可完全通過鍵盤訪問。

請參閱鍵盤協助工具和導覽.

內嵌內嵌內嵌縮放檢視器

不同的網頁對檢視者行為有不同的需求。有時網頁會提供可點按的連結，在個別瀏覽器視窗中開啟檢視器。在其他情況下，可能需要直接將檢視器內嵌在托管頁面中。在後一種情況下，網頁可能具有靜態頁面版面，或使用在不同裝置上顯示不同的回應式設計，或針對不同的瀏覽器視窗大小。為了滿足這些需求，檢視器支援三種主要操作模式：快顯視窗、固定大小內嵌和回應式內嵌。

快顯視窗

在快顯模式中，檢視器會在個別的網頁瀏覽器視窗或標籤中開啟。它會取用整個瀏覽器視窗區域，並在調整瀏覽器視窗大小或變更裝置方向時進行調整。

此模式是行動裝置最常見的模式。網頁會使用 window.open() JavaScript呼叫，已正確設定 A HTML元素，或任何其他合適的方式。

建議您使用現成可用的HTML頁面，來執行以下快顯模式： FlyoutViewer.html. 位於 html5/ 標準影像伺服檢視器部署的子資料夾：

<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或Foundation)的網頁。

否則，如果網頁同時設定檢視器容器的寬度和高度 DIV，則檢視器只會填入該區域，並遵循網頁版面所提供的大小。一個很好的使用案例範例是將檢視器內嵌至強制回應覆蓋中，其中覆蓋會根據網頁瀏覽器視窗大小來調整大小。

固定大小嵌入

您可以執行下列操作，將檢視器新增至網頁：

將檢視器JavaScript檔案新增至您的網頁。
定義容器 DIV.
設定檢視器大小。
建立和初始化檢視器。
將檢視器JavaScript檔案新增至您的網頁。

建立檢視器需要在HTML標題中新增指令碼標籤。使用檢視器API之前，請務必加入 FlyoutViewer.js. FlyoutViewer.js 為 html5/js/ 標準IS — 檢視器部署的子資料夾：

<s7viewers_root>/html5/js/FlyoutViewer.js

如果檢視器部署在其中一個AdobeDynamic Media伺服器上，且是從相同網域提供，則可使用相對路徑。否則，您將指定安裝IS-Viewers之一的AdobeDynamic Media伺服器的完整路徑。

相對路徑如下所示：

<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元素的範例：
```
<div id="s7viewer" style="position:relative;z-index:1"></div> 
```
設定檢視器大小。

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

要保持外部查看器邊界不變，請定義 .s7flyoutviewer 以絕對單位表示的頂層CSS類。 CSS中的大小調整可以直接放在HTML頁面或自訂檢視器CSS檔案中，稍後再指派給Dynamic Media Classic中的檢視器預設集記錄，或使用style命令明確傳遞。

請參閱自訂內嵌縮放檢視器以取得有關使用CSS來設定檢視器樣式的詳細資訊。

以下是在「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 物件至少必須以 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 取用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嵌入

您可以使用setter型API和無目標建構函式，而不使用JSON型初始化。使用此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>

adobe.com 上的資源

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

全新的改善搜尋

內嵌縮放

示範URL

使用內嵌縮放檢視器

與內嵌縮放檢視器互動

內嵌內嵌內嵌縮放檢視器

無限制高度的回應式設計內嵌

定義寬度和高度的靈活大小嵌入

使用基於Setter的API嵌入

adobe.com 上的資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe