轉盤

轉盤檢視器是一種檢視器，可顯示非可縮放橫幅影像的轉盤，以及可點選的熱點或區域。 此檢視器的目的是建置「可購買的轉盤」體驗，讓使用者在橫幅影像上選擇熱點或地區，並重新導向至客戶網站上的Quickview或產品詳細資訊頁面。 它可在桌上型電腦和行動裝置上運作。

檢視器類型為511。

示範URL

https://marketing.adobe.com/resources/help/en_US/s7/viewers_ref/samples/CarouselViewerDemo.html

系統要求

請參閱系統需求。

使用轉盤檢視器

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

轉盤檢視器可使用隨IS檢視器提供的可立即生產使用的HTML頁面，或在內嵌模式下，使用已記錄的API將轉盤檢視器整合至目標網頁。

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

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

與轉盤檢視器互動

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

檢視器可在橫幅影像上方演算熱點或區域，以指出產品上的互動區域。

按一下或點選作用點或區域會在作者期間觸發與其相關聯的動作。 動作可重新導向至網站上的不同頁面，或是將產品資訊傳回網頁邏輯，而網頁邏輯又可觸發具有相關產品內容的Quickview。

檢視器可完全透過鍵盤存取。

請參閱鍵盤協助功能和導覽。

內嵌轉盤檢視器

關於彈出式模式

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

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

建議您使用現成可用的HTML頁面來進行快顯作業模式。 在此例中，它稱為CarouselViewer.html，位於標準IS-Viewer部署的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，而不限制其高度，檢視器會根據所使用資產的長寬比自動選擇其高度。 此功能可確保資產完美整合至檢視中，而不會在側邊產生任何填補空間。 此使用案例是使用自適應網頁設計版面架構（例如引導、基礎等）的網頁最常見的使用案例。

否則，如果網頁同時設定檢視器容器DIV的寬度和高度，檢視器只會填滿該區域。 它也會遵循網頁版面的大小。 一個很好的例子是將檢視器內嵌至模態覆蓋，其中覆蓋會根據網頁瀏覽器視窗大小而調整大小。

固定大小內嵌

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

1. 將檢視器JavaScript檔案新增至您的網頁。

2. 定義容器DIV。

3. 設定檢視器大小。

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

5. 將檢視器JavaScript檔案新增至您的網頁。

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

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

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

相對路徑如下所示：

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

1. 定義容器DIV。

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

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

   以下是已定義的佔位符DIV元素的示例：

   <div id="s7viewer" style="position:relative"></div>
   

2. 設定檢視器大小

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

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

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

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

   #s7viewer.s7carouselviewer { 
    width: 1174px; 
    height: 500px; 
   }
   

   您可將stagesize修飾元與檢視器初始化程式碼及params系列明確傳遞，或以API呼叫的形式傳遞，如下所示：

   carouselViewer.setParam("stagesize", "1174,500");
   

   建議使用以CSS為基礎的方法，並在此範例中使用。

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

   完成上述步驟後，您將建立一個s7viewers.CarouselViewer類的實例，將所有配置資訊傳遞給其建構子，並在查看器實例上調用init()方法。 設定資訊會以JSON物件的形式傳遞至建構函式。 至少，此物件應具有containerId欄位，此欄位包含檢視器容器ID的名稱，並巢狀內嵌params JSON物件，檢視器支援設定參數。 在這種情況下，params物件至少必須將影像伺服URL傳遞為serverUrl屬性，而初始資產則必須為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>

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

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

上述所有步驟都與固定大小內嵌相同。 將容器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://marketing.adobe.com/resources/help/en_US/s7/viewers_ref/samples/CarouselViewer-responsive-unrestricted-height.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="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-based API和no-args建構函式，而不是使用JSON型初始化。 使用此API建構函式時，不會使用任何參數，而且設定參數是使用setContainerId()、setParam()和setAsset() API方法來指定，並使用個別的JavaScript呼叫。

下列範例說明如何搭配基於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>