eCatalog搜索 ecatalog-search

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

undefined
undefined

eCatalog Search Viewer是一种目录查看器，以跨页或逐页方式在跨页中显示电子小册子。 eCatalog允许用户使用其他用户界面元素或专用缩略图模式浏览目录。用户还可以放大每个页面以获取更多详细信息。

此查看器可与eCatalog配合使用，并且支持可选的图像映射和社交共享工具。它具有缩放工具、目录导航工具、全屏支持、缩略图和可选的关闭按钮。查看器还支持社交共享工具、打印、下载和收藏夹。它设计为可在台式机和移动设备上工作。

用户还可以对目录内容执行基于关键字或基于短语的搜索。

NOTE

此查看器不支持使用IR（图像渲染）或UGC（用户生成的内容）的图像。

查看器类型513。

请参阅系统要求和先决条件。

演示URL section-e1c3106f5b3e445d9b95be337c2f94e2

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查看器 section-e6c68406ecdc4de781df182bbd8088b4

eCatalog搜索查看器表示一个主JavaScript文件和一组帮助程序文件(单个JavaScript包含此特定查看器使用的所有Viewer SDK组件、资源、CSS)，这些文件由查看器在运行时下载

您可以使用随IS-Viewers提供的生产就绪型HTML页在弹出模式下使用eCatalog Search Viewer，也可以使用嵌入式模式使用，在嵌入式模式下，使用文档记录的API将其集成到目标网页中。

其配置和外观设计与其他查看器的配置和外观设计类似。所有外观设计都是通过自定义CSS实现的。

查看所有查看者通用的命令引用 — 配置属性和所有查看者通用的命令引用 — URL

与eCatalog搜索查看器交互 section-642e66ca38cd4032992840ec6c0b0cd2

eCatalog Search Viewer支持其他移动设备应用程序中常见的以下触控手势。

手势

说明

单点按

选择样本中的新缩略图。

双击

放大一个级别，直到达到最大放大率。下一个双击手势会将查看器重置为初始查看状态。

捏合

放大或缩小。

水平轻扫或轻扫

如果使用幻灯片框架过渡，则滚动目录页面的列表。

垂直轻扫或轻扫

当图像处于重置状态时，它将执行本机页面滚动。

当缩略图处于活动状态时，它会滚动缩略图列表。

可以为在目录页面之间导航启用逼真的页面翻转动画效果。在这种情况下，用户可以按住并拖动页面拐角并翻转页面。

此查看器还支持在带有触摸屏和鼠标的Windows设备上输入触摸和鼠标。但是，此支持仅适用于Chrome、Internet Explorer 11和Edge Web浏览器。

使用eCatalog搜索查看器共享社交媒体工具 section-eb575084a99647c3a9591f439f40b412

eCatalog搜索查看器支持社交共享工具。它们作为主控件栏中的按钮提供，当用户单击或点按它时，该按钮将扩展为共享工具栏。

共享工具栏包含各种支持的共享渠道类型的图标，包括Facebook、Twitter、电子邮件共享、嵌入代码共享和链接共享。激活电子邮件共享、嵌入共享或链接共享工具后，查看器会显示一个模式对话框，其中包含相应的数据输入表单。调用Facebook或Twitter时，查看器会将用户从社交服务重定向到标准共享对话框。由于Web浏览器安全限制，共享工具在全屏模式下不可用。

查看器的搜索功能作为主工具栏中的镜面图标提供。单击或点按图标会激活包含输入字段的搜索面板。输入关键字或短语并按Enter键后，查看器将在面板中呈现搜索结果，并在主视图中突出显示找到的单词。

嵌入eCatalog搜索查看器 section-6bb5d3c502544ad18a58eafe12a13435

不同的网页对查看者的行为具有不同的需求。有时，网页会提供一个链接，选中该链接后，会在单独的浏览器窗口中打开查看器。在其他情况下，需要直接将查看器嵌入到托管页面中。在后一种情况下，网页可能具有静态页面布局，或者使用响应式设计，该设计在不同的设备上或对于不同的浏览器窗口大小显示不同。为了满足这些需求，查看器支持三种主要操作模式：弹出窗口、固定大小嵌入和响应式设计嵌入。

关于弹出模式

在弹出模式下，查看器将在单独的Web浏览器窗口或选项卡中打开。它采用整个浏览器窗口区域，并在浏览器调整大小或移动设备的方向更改时进行调整。

弹出模式是移动设备中最常见的一种模式。该网页使用window.open() JavaScript调用、正确配置的AHTML元素或任何其他合适的方法加载查看器。

建议您为弹出操作模式使用现成的HTML页面。在这种情况下，该文件夹名为eCatalogSearchViewer.html，位于标准IS-Viewers部署的html5/子文件夹中：

<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、基础等)的网页。

否则，如果网页同时设置了查看器容器DIV的宽度和高度，则查看器仅填充该区域，并遵循网页布局提供的大小。一个很好的示例是将查看器嵌入到模式叠加中，其中叠加根据Web浏览器窗口大小调整大小。

固定大小嵌入

通过执行以下操作将查看器添加到网页：

正在将查看器JavaScript文件添加到您的网页。
定义容器DIV。
设置查看器大小。
创建和初始化查看器。
正在将查看器JavaScript文件添加到您的网页。

创建查看器需要您在HTML头中添加脚本标记。在使用查看器API之前，请确保包括eCatalogSearchViewer.js。 eCatalogSearchViewer.js文件位于标准IS-Viewers部署的html5/js/子文件夹下：

<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元素的示例：

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

设置查看器大小

您可以通过声明查看器为.s7ecatalogsearchviewer顶级CSS类（以绝对单位表示）或使用stagesize修饰符来设置查看器的静态大小。

您可以将CSS的大小直接放在HTML页面上，或放在自定义查看器CSS文件中，该文件随后将分配给Dynamic Media Classic中的查看器预设记录，或者使用样式命令显式传递。

有关使用CSS设置查看器样式的详细信息，请参阅自定义eCatalog查看器。

以下是在“HTML”页中定义静态查看器大小的示例：

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

您可以在Dynamic Media Classic中的查看器预设记录中设置stagesize修饰符，或通过params集合中的查看器初始化代码显式传递它，或作为API调用传递，如命令引用部分中所述，如下所示：

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

正在初始化查看器。

完成上述步骤后，创建s7viewers.eCatalogSearchViewer类的实例，将所有配置信息传递到其构造函数，并在查看器实例上调用init()方法。配置信息作为JSON对象传递给构造函数。此对象至少具有containerId字段，该字段保存了查看器容器ID的名称，并嵌套params JSON对象，其中包含查看器支持的配置参数。在这种情况下，params对象必须至少将图像服务URL作为serverUrl属性传递，并将初始资产作为asset参数传递。基于JSON的初始化API允许您通过一行代码创建和启动查看器。

必须将查看器容器添加到DOM，以便查看器代码可以按其ID查找容器元素。某些浏览器会延迟构建DOM，直到网页结尾。但是，为了最大程度地兼容，请在结束BODY标记之前或主体onload()事件上调用init()方法。

同时，容器元素目前也不一定是网页布局的一部分。例如，可以使用分配给它的display:none样式隐藏它。在这种情况下，查看器会延迟其初始化过程，直到网页将容器元素带回布局为止。发生这种情况时，查看器加载会自动恢复。

以下是创建查看器实例、将所需的最少配置选项传递给构造函数以及调用init()方法的示例。该示例假设eCatalogSearchViewer是查看器实例；s7viewer是占位符DIV的名称；https://s7d1.scene7.com/is/image/是图像服务URL，Viewers/Pluralist是资源：

code language-html

code language-html
`<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>`

<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搜索查看器且大小固定的普通网页的完整示例：

code language-html

code language-html
<!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>

<!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占用Web浏览器窗口大小的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嵌入

可以使用基于setter的API和no-args构造函数，而不是使用基于JSON的初始化。使用该API构造函数时，不接受任何参数，并且配置参数是使用具有单独的JavaScript调用的setContainerId()、setParam()和setAsset() API方法指定的。

以下示例显示使用基于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>

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8