文件Dynamic Media檢視器參考指南

Zoom zoom

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • 開發人員
  • 使用者

縮放檢視器是一種顯示可縮放影像的影像檢視器。 此檢視器可搭配影像集使用，並使用色票完成導覽。 它有縮放工具、全熒幕支援、色票和選用的關閉按鈕。 專為桌上型電腦和行動裝置所設計。

NOTE
此檢視器不支援使用IR （影像演算）或UGC （使用者產生的內容）的影像。

檢視器型別502。

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

示範URL section-e1c3106f5b3e445d9b95be337c2f94e2

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

使用縮放檢視器 section-e6c68406ecdc4de781df182bbd8088b4

縮放檢視器代表主要JavaScript檔案和一組協助程式檔案(單一JavaScript包含此特定檢視器使用的所有Viewer SDK元件、資產、CSS)，這些檔案由檢視器在執行階段下載。

您可以在快顯視窗模式中使用縮放檢視器，只要使用隨IS-Viewers提供的生產就緒HTML頁面，或透過內嵌模式使用檔案說明的API將其整合至目標網頁。

組態和外觀設定與其他檢視器的組態和外觀設定類似。 所有外觀設定都是透過自訂CSS來達成。

檢視所有檢視器通用的命令參考 — 組態屬性和所有檢視器通用的命令參考 — URL

與縮放檢視器互動 section-642e66ca38cd4032992840ec6c0b0cd2

縮放檢視器支援下列其他行動應用程式中常見的觸控手勢。 當檢視器無法處理使用者的撥動手勢時，會將事件轉送給網頁瀏覽器，以執行原生頁面捲動。 即使檢視器佔據裝置熒幕區域的大部分，這類功能仍可讓使用者導覽頁面。

手勢
說明
點一下滑鼠
選取色票中的新縮圖。 在主檢視中，它會隱藏或顯示使用者介面元素。
點兩下
放大一個層級，直到達到最大放大倍數。 下一個雙點手勢會將檢視器重設為初始檢視狀態。
捏合
放大或縮小。
水準撥動或輕觸

在色票列中捲動色票清單。

如果影像處於重設狀態，且 frametransition 引數設定為幻燈片，則資產會隨幻燈片動畫而變更。 對於其他框架轉換模式，手勢會執行原生頁面捲動。

如果影像已放大，則會水準移動影像。 如果將影像移至檢視邊緣，並在相同方向執行撥動，手勢會執行原生頁面捲動。

垂直撥動

如果影像處於重設狀態，手勢會執行原生頁面捲動。

放大影像時，會垂直移動影像。 如果將影像移至檢視邊緣，並朝相同方向執行撥動，手勢會執行原生頁面捲動。

如果該手勢是在色票區域內完成，則會執行原生頁面捲動。

該檢視器支援觸控式輸入及滑鼠輸入Windows裝置上的觸控式熒幕及滑鼠。 不過，這項支援僅限Chrome、Internet Explorer 11和Edge網頁瀏覽器。

此檢視器可使用完整的鍵盤。

請參閱鍵盤協助工具與導覽。

內嵌縮放檢視器 section-6bb5d3c502544ad18a58eafe12a13435

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

關於快顯視窗模式

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

此模式在行動裝置中最常見。 網頁會使用window.open() JavaScript呼叫、正確設定的AHTML元素或任何其他適當的方法載入檢視器。

建議您為快顯視窗操作模式使用現成可用的HTML頁面。 現成可用的HTML頁面稱為ZoomViewer.html，且位於標準IS-Viewers部署的html5/子資料夾下，如下所示：

<s7viewers_root>/html5/ZoomViewer.html

套用自訂CSS以取得頁面的自訂外觀。

以下是在新視窗中開啟檢視器的HTML程式碼範例：

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

關於固定大小內嵌模式和回應式設計內嵌模式

在內嵌模式中，檢視器會新增至現有網頁，其中可能已有某些與檢視器無關的客戶內容。 檢視器通常只會佔用網頁的一部分空間。

主要使用案例是針對桌上型電腦或平板電腦裝置的網頁，以及可依裝置型別自動調整版面的回應式設計頁面。

當檢視器在初始載入後未變更其大小時，會使用固定大小內嵌。 此選項是靜態佈局網頁的最佳選擇。

回應式設計內嵌模式假設由於檢視器容器DIV的大小變更，在執行階段期間必須調整檢視器的大小。 最常見的使用案例是將檢視器新增到使用彈性配置的網頁。

在回應式設計內嵌模式中，檢視器的行為會因網頁大小其容器DIV的方式而異。 如果網頁僅設定容器DIV的寬度，而不限制其高度，則檢視器會根據所使用資產的外觀比例，自動選擇其高度。 此邏輯可確保資產完全符合檢視方式，而不會在兩側加上任何邊框間距。 此使用案例最常用於使用回應式配置架構(例如Bootstrap和Foundation)的網頁。

如果網頁同時設定檢視器容器DIV的寬度和高度，則檢視器會填滿該區域，並遵循網頁提供的大小。 例如，將檢視器內嵌至模式覆蓋圖，其中覆蓋圖會根據網頁瀏覽器視窗大小而調整。

固定大小內嵌 section-44f365e6c0dd40709467a459afa82a7f

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

  1. 正在將viewer JavaScript檔案新增至您的網頁。

  2. 定義容器DIV。

  3. 設定檢視器大小。

  4. 正在建立和初始化檢視器。

  5. 正在將viewer JavaScript檔案新增至您的網頁。

    建立檢視器需要您在HTML標題中新增指令碼標籤。 在可以使用檢視器API之前，請確定您已包含ZoomViewer.js。 ZoomViewer.js檔案位於標準IS-Viewers部署的html5/js/子資料夾下：

<s7viewers_root>/html5/js/ZoomViewer.js

如果檢視器部署在任一Adobe Dynamic Media Classic伺服器上，且從相同網域提供服務，您就可以使用相對路徑。 否則，請指定已安裝IS-Viewers之其中一個Adobe Dynamic Media Classic伺服器的完整路徑。

相對路徑如下所示：

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/ZoomViewer.js"></script>
NOTE
僅參考頁面上的主要檢視器JavaScript include檔案。 請勿在網頁程式碼中參考任何其他JavaScript檔案（這些檔案可能由執行階段的檢視器邏輯下載）。 特別是，請勿直接參考檢視器從/s7viewers內容路徑（所謂整合SDK include）載入的HTML5 SDK Utils.js資料庫。 原因在於Utils.js或類似的執行階段檢視器程式庫的位置完全由檢視器的邏輯管理，且位置會在檢視器發行版本之間變更。 Adobe不會在伺服器上保留舊版的次要檢視器includes。
因此，日後部署新產品版本時，將檢視器使用的任何次要JavaScript include的直接參照放在頁面上，會中斷檢視器功能。

  1. 定義容器DIV。

    新增空的DIV元素至要顯示檢視器的頁面。 DIV元素必須定義其ID，因為此ID稍後會傳遞至檢視器API。

    預留位置DIV是定位元素，表示position CSS屬性設定為relative或absolute。

    以下為已定義預留位置DIV元素的範例：

    code language-html 
    <div id="s7viewer" style="position:relative"></div>

  2. 設定檢視器大小。

    此檢視器在使用多專案集時會顯示縮圖，在案頭系統上，縮圖會放置在主要檢視的下方。 同時，檢視器允許在執行階段使用setAsset() API交換主要資產。 身為開發人員，只要新資產只有一個專案，您就能控制檢視器管理底部縮圖區域的方式。 可以保持外部檢視器大小不變，並讓主檢視增加其高度並佔據縮圖區域。 或者，您可以讓主要檢視大小保持靜態，並收合外部檢視器區域，讓網頁內容向上移動，並使用縮圖中的剩餘自由熒幕空間。

    若要保持外部檢視器界限不變，請以絕對單位定義.s7zoomviewer最上層CSS類別的大小。 在CSS中調整大小可直接放在HTML頁面上。 或者，也可以將其放入自訂檢視器CSS檔案中，稍後再將該檔案指派給Dynamic Media Classic中的檢視器預設集記錄，或明確使用樣式命令傳遞。

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

    以下是在「HTML」頁面中定義靜態外部檢視器大小的範例：

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

    您可以在下列範例中檢視固定式外部檢視器的行為。 請注意，當您在組之間切換時，外部檢視器大小不會變更：

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

    若要將主要檢視維度設為靜態，請使用.s7zoomviewer .s7container CSS選取器或使用stagesize修飾元，以絕對單位定義內部Container SDK元件的檢視器大小。

    以下範例說明如何為內部Container SDK元件定義檢視器大小，以便在切換資產時，主要檢視區域不會變更其大小：

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

    下列示範頁面會以固定的主檢視大小顯示檢視器行為。 請注意，當您在組之間切換時，主要檢視會保持靜態，而網頁內容會垂直移動。

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

    您可以在Dynamic Media Classic的檢視器預設集記錄中設定stagesize修飾元。 或者，您也可以使用params集合的檢視器初始化程式碼明確傳遞，或如本說明的Command Reference一節中所述，以API呼叫形式傳遞，如下所示：

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

    此範例建議您使用以CSS為基礎的方法。

  3. 正在建立和初始化檢視器。

    完成上述步驟後，您會建立s7viewers.ZoomViewer類別的執行個體、將所有組態資訊傳遞至其建構函式，並在檢視器執行個體上呼叫init()方法。

    組態資訊會以JSON物件的形式傳遞至建構函式。 此物件至少應有containerId欄位，其包含檢視器容器ID的名稱，以及巢狀params JSON物件，其中包含檢視器支援的設定引數。 在此情況下，params物件必須至少將影像伺服URL傳遞為serverUrl屬性，並將初始資產傳遞為asset引數。 JSON型初始化API可讓您使用一行程式碼來建立和啟動檢視器。

    請務必將檢視器容器新增至DOM，讓檢視器程式碼可依其ID尋找容器元素。 有些瀏覽器會延遲建立DOM，直到網頁結尾為止。 為達到最大相容性，請在結尾的BODY標籤前面或內文onload()事件上呼叫init()方法。

    同時，容器元素也不一定屬於網頁版面配置的一部分。 例如，可以使用指派給它的display:none樣式來隱藏它。 在此情況下，檢視器會延遲其初始化程式，直到網頁將容器元素帶回版面配置為止。 當此動作發生時，檢視器載入會自動繼續。

    以下是建立檢視器執行個體、將最低必要組態選項傳遞給建構函式，以及呼叫init()方法的範例。 此範例假設zoomViewer是檢視器執行個體，s7viewer是預留位置DIV的名稱，http://s7d1.scene7.com/is/image/是影像伺服URL，而Scene7SharedAssets/ImageSet-Views-Sample是資產。

    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>

    下列程式碼為將視訊檢視器嵌入固定大小的簡單網頁的完整範例：

    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>

高度不受限制的回應式設計內嵌 section-b9ca11a7e7aa4f74ab43244cbca37ae0

透過回應式設計內嵌，網頁通常會有某種彈性的配置，可指定檢視器容器DIV的執行階段大小。 對於下列範例，假設網頁允許檢視器的容器DIV取得網頁瀏覽器視窗大小的40%，其高度不受限制。 網頁HTML程式碼如下所示：

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

將檢視器新增至這類頁面，類似於固定大小內嵌的步驟。 唯一的區別是您不需要明確定義檢視器大小。

  1. 正在將viewer JavaScript檔案新增至您的網頁。
  2. 定義容器DIV。
  3. 正在建立和初始化檢視器。

上述所有步驟與內嵌固定大小相同。 將容器DIV新增至現有的"holder" DIV。 下列程式碼為完整的範例。 請注意瀏覽器調整大小時檢視器大小的變化，以及檢視器外觀比例與資產的相符情形。

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

以下範例頁面說明高度不受限制的回應式設計內嵌在實際應用中的更多情況：

即時示範

定義寬度和高度的彈性大小內嵌 section-3674e6c032594441a6576b7fb1de6e64

如果有已定義寬度和高度的彈性大小內嵌，則網頁樣式會不同。 它同時提供大小給"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/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>

使用setter型API進行內嵌 section-44e014925f24418b900696003855c0a9

除了使用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/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