eCatalog搜尋

eCatalog搜尋檢視器是一種目錄檢視器，可依分頁或分頁顯示電子小冊子。eCatalog可讓使用者使用其他使用者介面元素或專用的縮圖模式，來導覽目錄。使用者也可以放大每個頁面，以取得更詳細的資訊。

此檢視器可與ecatalog搭配使用，並支援選用的影像地圖和社交分享工具。它提供縮放工具、目錄導覽工具、全螢幕支援、縮圖，以及可選的關閉按鈕。檢視器也支援社交分享工具、列印、下載和我的最愛。專為在桌上型電腦和行動裝置上運作而設計。

用戶也可以對目錄內容執行基於關鍵字或基於短語的搜索。

注意

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

檢視器類型513。

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

示範URL

https://s7d9.scene7.com/s7viewers/html5/eCatalogSearchViewer.html?emailurl=https://s7d9.scene7.com/s7/emailFriend&serverUrl=https://s7d9.scene7.com/is/image/&config=Scene7SharedAssets/Universal_HTML5_eCatalog_Search&contenturl=https://s7d9.scene7.com/skins/&asset=Viewers/Pluralist&searchserverurl=https://s7search1.scene7.com/s7search/

使用eCatalog檢視器

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

您可以使用隨IS檢視器提供的生產就緒HTML頁面，或以內嵌模式，在快顯模式中使用eCatalog搜尋檢視器，在該模式中，使用記錄的API將其整合至目標網頁。

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

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

與eCatalog搜尋檢視器互動

eCatalog搜尋檢視器支援下列其他行動應用程式中常見的觸控手勢。

手勢	說明
單點擊	在色票中選取新縮圖。
按兩下	放大到達到最大放大率為止。下一個雙點觸控手勢會將檢視器重設為初始檢視狀態。
代號	放大或縮小。
水準滑動或輕觸	如果使用幻燈片幀轉變，則滾動目錄頁清單。
垂直滑動或輕觸	當影像處於重設狀態時，會執行原生頁面捲動。縮圖處於活動狀態時，會捲動縮圖清單。

可以在目錄頁面之間導航時啟用逼真的頁面翻轉動畫效果。在這種情況下，使用者可以按住並拖曳頁面角，然後翻轉頁面。

此查看器還支援Windows設備上的觸摸輸入和滑鼠輸入，該設備帶有觸摸屏和滑鼠。不過，此支援僅限Chrome、Internet Explorer 11和Edge網頁瀏覽器。

使用eCatalog搜尋檢視器的社交媒體分享工具

eCatalog搜尋檢視器支援社交分享工具。這些工具可作為主控制列的按鈕使用，當使用者點按或點選時，主控制列會展開為分享工具列。

共用工具列包含支援之每種共用管道類型的圖示，包括Facebook、Twitter、電子郵件共用、內嵌程式碼共用和連結共用。啟用電子郵件共用、內嵌共用或連結共用工具時，檢視器會顯示含有對應資料輸入表單的強制回應對話方塊。呼叫Facebook或Twitter時，檢視器會將使用者重新導向至社交服務的標準共用對話方塊。由於網頁瀏覽器安全性限制，無法以全螢幕模式使用共用工具。

檢視器的「搜尋」功能在主工具列中以外觀玻璃圖示的形式提供。按一下或點選圖示會啟用「搜尋」面板並搭配輸入欄位。輸入關鍵字或片語並按Enter後，檢視器會在面板中呈現搜尋結果，並反白標示主檢視中找到的字詞。

嵌入eCatalog搜索查看器

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

關於快顯模式

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

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

建議您對快顯操作模式使用現成可用的HTML頁面。在這種情況下，它稱為 eCatalogSearchViewer.html 和位於 html5/ 標準IS — 檢視器部署的子資料夾：

<s7viewers_root>/html5/eCatalogSearchViewer.html

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

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

<a href="https://s7d9.scene7.com/s7viewers/html5/eCatalogSearchViewer.html?emailurl=https://s7d9.scene7.com/s7/emailFriend&serverUrl=https://s7d9.scene7.com/is/image/&config=Scene7SharedAssets/Universal_HTML5_eCatalog_Search&contenturl=https://s7d9.scene7.com/skins/&asset=Viewers/Pluralist&searchserverurl=https://s7search1.scene7.com/s7search/" target="_blank">Open pop-up viewer</a>

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

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

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

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

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

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

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

固定大小嵌入

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

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

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

<s7viewers_root>/html5/js/eCatalogSearchViewer.js

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

相對路徑如下所示：

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

定義容器DIV。

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

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

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

您可以為聲明來設定檢視器的靜態大小 .s7ecatalogsearchviewer 頂層CSS類（以絕對單位表示），或使用 stagesize 修飾詞。

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

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

以下是在「HTML」頁面中定義靜態檢視器大小的範例：
```
#s7viewer.s7ecatalogsearchviewer { 
 width: 640px; 
 height: 480px; 
}
```
您可以設定 stagesize 修飾元(在Dynamic Media Classic的檢視器預設集記錄中)，或以檢視器初始化程式碼明確傳遞 params 集合，或以API呼叫的形式（如命令參考區段所述），如下所示：
```
eCatalogSearchViewer.setParam("stagesize", 
"640,480");
```
正在初始化查看器。

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

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

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

以下是建立檢視器例項、將最低必要的設定選項傳遞至建構函式，並呼叫 init() 方法。此範例假設 eCatalogSearchViewer 是檢視器例項； s7viewer 是佔位符的名稱 DIV; https://s7d1.scene7.com/is/image/ 是影像伺服URL，且 Viewers/Pluralist 是資產：
```
<script type="text/javascript"> 
var eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"Viewers/Pluralist", 
 "serverurl":"https://s7d1.scene7.com/is/image/", 
 "searchserverurl":"https://s7search1.scene7.com/s7search/" 
} 
}).init(); 
</script>
```
以下代碼是嵌入大小固定的eCatalog搜索查看器的簡單網頁的完整示例：
```
<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="https://s7d1.scene7.com/s7viewers/html5/js/eCatalogSearchViewer.js"></script> 
<style type="text/css"> 
#s7viewer.s7ecatalogsearchviewer { 
 width: 640px; 
 height: 480px; 
} 
</style> 
</head> 
<body> 
<div id="s7viewer" style="position:relative"></div> 
<script type="text/javascript"> 
var eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"Viewers/Pluralist", 
 "serverurl":"https://s7d1.scene7.com/is/image/", 
 "searchserverurl":"https://s7search1.scene7.com/s7search/" 
} 
}).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>

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

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

上述所有步驟與固定大小嵌入相同。新增容器 DIV 至現有「持有者」 DIV. 下列程式碼為完整的範例。您可以查看瀏覽器調整大小時檢視器大小的變更，以及檢視器外觀比例與資產的相符情形。

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="https://s7d1.scene7.com/s7viewers/html5/js/eCatalogSearchViewer.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 eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"Viewers/Pluralist", 
 "serverurl":"https://s7d1.scene7.com/is/image/", 
 "searchserverurl":"https://s7search1.scene7.com/s7search/" 
} 
}).init(); 
</script> 
</body> 
</html>

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

即時演示

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

若是定義寬度和高度的彈性內嵌，網頁樣式會有所不同。也就是說，它為「保持器」提供了兩種大小 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://s7d1.scene7.com/s7viewers/html5/js/eCatalogSearchViewer.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 eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"Viewers/Pluralist", 
 "serverurl":"https://s7d1.scene7.com/is/image/", 
 "searchserverurl":"https://s7search1.scene7.com/s7search/" 
} 
}).init(); 
</script> 
</body> 
</html>

使用基於Setter的API嵌入

與其使用JSON型初始化，您可以使用setter型API和無目標建構子。使用該API建構函式時，不會取用任何參數，且會使用 setContainerId(), setParam()，和 setAsset() API方法搭配個別的JavaScript呼叫。

下列範例顯示使用setter型API進行固定大小內嵌：

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="https://s7d1.scene7.com/s7viewers/html5/js/eCatalogSearchViewer.js"></script> 
<style type="text/css"> 
#s7viewer.s7ecatalogsearchviewer { 
 width: 640px; 
 height: 480px; 
} 
</style> 
</head> 
<body> 
<div id="s7viewer" style="position:relative"></div> 
<script type="text/javascript"> 
var eCatalogSearchViewer = new s7viewers.eCatalogSearchViewer(); 
eCatalogSearchViewer.setContainerId("s7viewer"); 
eCatalogSearchViewer.setParam("serverurl", "https://s7d1.scene7.com/is/image/"); 
eCatalogSearchViewer.setParam("searchserverurl", "https://s7search1.scene7.com/s7search/"); 
eCatalogSearchViewer.setAsset("Viewers/Pluralist"); 
eCatalogSearchViewer.init(); 
</script> 
</body> 
</html>

adobe.com 上的資源

Style System Auto Form Fill Embedded Charts Version History Content Management Headless Cms

全新的改善搜尋

eCatalog搜尋

示範URL

使用eCatalog檢視器

與eCatalog搜尋檢視器互動

使用eCatalog搜尋檢視器的社交媒體分享工具

嵌入eCatalog搜索查看器

adobe.com 上的資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe