轉盤

轉盤檢視器是一種檢視器，可顯示不可縮放橫幅影像的轉盤，其中包含可點按的熱點或區域。此檢視器可協助您實作「可購買的轉盤」體驗，讓使用者可在橫幅影像上選取熱點或區域。他們可以重新導向至客戶網站上的快速檢視或產品詳細資料頁面。專為在桌上型電腦和行動裝置上運作而設計。

注意

此檢視器不支援使用影像轉譯或使用者產生的內容(UGC)的影像。

檢視器類型為511。

示範URL

https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/carousel/CarouselViewerDemo.html?lang=zh-Hant?lang=zh-Hant

系統要求

請參閱系統要求。

使用轉盤檢視器

轉盤檢視器代表主要JavaScript檔案和一組協助檔案（單一JavaScript包含此特定檢視器、資產、CSS所使用的所有檢視器SDK元件），由檢視器在執行階段下載。

轉盤檢視器可以使用隨IS檢視器提供的生產就緒HTML頁面，或以內嵌模式使用，在此模式中，使用記錄的API將其整合至目標網頁。

設定和外觀與本說明中所述其他檢視器的設定和外觀類似。所有外觀設定都是透過自訂CSS來達成。

請參閱所有檢視器通用的命令參考 — 設定屬性和所有檢視器通用的命令參考 — URL

與轉盤檢視器互動

在轉盤集中導覽是使用在主檢視上水準滑動，或在案頭裝置上提供兩個箭頭按鈕來完成。設定指示點顯示設定內的當前位置。

檢視器可呈現橫幅影像頂端的熱點或區域，以指出產品上的互動區域。

按一下或點選熱點或區域，會在製作期間觸發與其相關聯的動作。動作可重新導向至網站上的不同頁面，或者可將產品資訊傳回網頁邏輯，而邏輯又可觸發包含相關產品內容的快速檢視。

檢視器可完全鍵盤存取。

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

內嵌轉盤檢視器

關於快顯模式

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

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

建議您對快顯作業模式使用現成可用的HTML頁面。在此情況下，稱為CarouselViewer.html，位於標準IS-Viewers部署的html5/子資料夾中：

<s7viewers_root>/html5/CarouselViewer.html

您可以套用自訂CSS來達到視覺化自訂。

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

<a href="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/CarouselViewer.html?asset=/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner&serverurl=https://adobedemo62-h.assetsadobe.com/is/image" target="_blank">Open popup viewer</a>

關於固定大小嵌入模式和響應式設計嵌入模式

在內嵌模式中，檢視器會新增至現有網頁。此網頁可能已有一些與檢視器無關的客戶內容。觀看者通常只佔有網頁的一部分房地產。

主要使用案例為以桌上型電腦或平板電腦裝置為導向的網頁，以及回應式設計的頁面，這些頁面會根據裝置類型自動調整版面。

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

回應式設計內嵌假設檢視器必須在執行階段調整大小，以回應其容器DIV的大小變更。最常見的使用案例是在使用彈性頁面版面的網頁中新增檢視器。

在回應式設計內嵌模式中，檢視器的運作方式會因網頁大小其容器DIV而有所不同。如果網頁僅設定容器的寬度DIV，保持高度不受限制，則檢視器會根據所使用資產的外觀比例自動選擇其高度。此功能可確保資產完全符合檢視，而無需邊框上的邊框間距。此使用案例是使用回應式網頁設計配置架構(例如Bootstrap和Foundation)的網頁中最常見的使用案例。

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

固定大小嵌入

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

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

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

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js

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

相對路徑如下所示：

<script language="javascript" type="text/javascript" src="/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script>

注意

僅參考頁面上的主檢視器JavaScript include檔案。請勿在網頁程式碼中參考任何其他JavaScript檔案，這些檔案可能會由檢視器的邏輯在執行階段下載。尤其是，請勿直接參考檢視器從/s7viewers內容路徑（稱為統一SDK include）載入的HTML5 SDK Utils.js程式庫。原因在於，Utils.js或類似的執行階段檢視器程式庫的位置，是由檢視器的邏輯完全管理，且檢視器版本之間的位置變更。 Adobe不會在伺服器上保留舊版次要檢視器includes。

因此，將檢視器使用的任何次要JavaScript include的直接參考放在頁面上，會在未來部署新產品版本時中斷檢視器的功能。

定義容器DIV。

將空白的DIV元素新增至您希望檢視器顯示的頁面。 DIV元素必須已定義其ID，因為此ID稍後會傳遞至檢視器API。 DIV的大小是透過CSS指定。

佔位符DIV是定位的元素，這意味著position CSS屬性設定為relative或absolute。

以下是定義的佔位符DIV元素的示例：
```
<div id="s7viewer" style="position:relative"></div>
```
設定檢視器大小

您可以為檢視器設定靜態大小，方法是以絕對單位為.s7carouselviewer頂層CSS類別聲明，或使用stagesize修飾詞。

您可以直接在HTML頁面上將大小調整為CSS。或者，您可以將大小調整放在自訂檢視器CSS檔案中，該檔案稍後會指派給AEM Assets — 隨選的檢視器預設集記錄，或使用style命令明確傳遞。

如需使用CSS來設定檢視器樣式的詳細資訊，請參閱自訂轉盤檢視器。

以下是在HTML頁面中定義靜態檢視器大小的範例：
```
#s7viewer.s7carouselviewer { 
 width: 1174px; 
 height: 500px; 
}
```
您可以使用包含params集合的檢視器初始化程式碼，或如「命令參考」區段所述，以API呼叫的形式明確傳遞stagesize修飾元，如下所示：
```
carouselViewer.setParam("stagesize", "1174,500");
```
建議使用CSS型方法，此範例中會使用。
建立和初始化檢視器。

完成上述步驟後，可以建立一個s7viewers.CarouselViewer類的實例，將所有配置資訊傳遞到其建構子，並在查看器實例上調用init()方法。設定資訊會以JSON物件的形式傳遞至建構函式。此物件至少應有containerId欄位，該欄位包含檢視器容器ID的名稱，並巢狀params JSON物件，以及檢視器支援的設定參數。在此情況下，params物件至少必須以serverUrl屬性傳遞影像伺服URL，並以asset參數傳遞初始資產。 JSON型初始化API可讓您使用一行程式碼來建立和啟動檢視器。

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

同時，容器元素還不一定是網頁版面的一部分。例如，可使用指派給它的display:none樣式來隱藏它。在此情況下，檢視器會延遲其初始化程式，直到網頁將容器元素帶回版面的那一刻為止。當此功能發生時，檢視器載入會自動恢復。

以下是建立查看器實例、將最小必要配置選項傳遞給建構子並調用init()方法的示例。此範例假設carouselViewer為檢視器例項；s7viewer是佔位符DIV的名稱；https://adobedemo62-h.assetsadobe.com/is/image是影像伺服URL，而/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner是資產：
```
<script type="text/javascript"> 
var carouselViewer = new s7viewers.CarouselViewer ({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner", 
 "serverurl":"https://adobedemo62-h.assetsadobe.com/is/image" 
} 
}).init(); 
</script>
```
下列程式碼是內嵌固定大小轉盤檢視器的簡單網頁的完整範例：
```
<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script> 
<style type="text/css"> 
#s7viewer.s7carouselviewer { 
 width: 1174px; 
 height: 500px; 
} 
</style> 
</head> 
<body> 
<div id="s7viewer" style="position:relative"></div> 
<script type="text/javascript"> 
var carouselViewer = new s7viewers.CarouselViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner", 
 "serverurl":"https://adobedemo62-h.assetsadobe.com/is/image" 
} 
}).init(); 
</script> 
</body> 
</html>
```

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

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

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

將檢視器新增至此類頁麵類似於固定大小內嵌的步驟。唯一的差異是您不需要明確定義檢視器大小。

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

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

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script> 
<style type="text/css"> 
.holder { 
 width: 80%; 
} 
</style> 
</head> 
<body> 
<div class="holder"> 
<div id="s7viewer" style="position:relative"></div> 
</div> 
<script type="text/javascript"> 
var carouselViewer = new s7viewers.CarouselViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner", 
 "serverurl":"https://adobedemo62-h.assetsadobe.com/is/image" 
} 
}).init(); 
</script> 
</body> 
</html>

下列範例頁面說明在實際使用中，不受限制高度的回應式設計內嵌：

https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/carousel/CarouselViewer-responsive-unrestricted-height.html?lang=zh-Hant?lang=zh-Hant

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

在已定義寬度和高度的彈性大小內嵌中，網頁樣式不同。它會為"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="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.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 carouselViewer = new s7viewers.CarouselViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner", 
 "serverurl":"https://adobedemo62-h.assetsadobe.com/is/image" 
} 
}).init(); 
</script> 
</body> 
</html>

使用基於Setter的API嵌入

您可以使用setter型API和無目標建構函式，而不使用JSON型初始化。使用此API建構函式時不會採用任何參數，且會使用具有個別JavaScript呼叫的setContainerId()、setParam()及setAsset() API方法指定設定參數。

以下範例說明如何使用固定大小內嵌搭配setter型API:

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script> 
<style type="text/css"> 
#s7viewer.s7carouselviewer { 
 width: 1174px; 
 height: 500px; 
} 
</style> 
</head> 
<body> 
<div id="s7viewer" style="position:relative"></div> 
<script type="text/javascript"> 
var carouselViewer = new s7viewers.CarouselViewer(); 
carouselViewer.setContainerId("s7viewer"); 
carouselViewer.setParam("serverurl", "https://adobedemo62-h.assetsadobe.com/is/image"); 
carouselViewer.setAsset("/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner"); 
carouselViewer.init(); 
</script> 
</body> 
</html>

adobe.com 上的資源

Multichannel Communication Content Insights Style System Targeted Content Document Generation Dynamic Media

轉盤

示範URL

系統要求

使用轉盤檢視器

與轉盤檢視器互動

內嵌轉盤檢視器

adobe.com 上的資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe