eCatalog搜索 ecatalog-search

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包含此特定查看器、资产和CSS使用的所有Viewer SDK组件),这些文件由查看器在运行时下载

您可以使用随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调用,正确配置 A HTML元素或任何其他适当的方法。

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

<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浏览器窗口大小调整大小。

固定大小嵌入

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

  1. 将查看器JavaScript文件添加到网页。

  2. 定义容器DIV。

  3. 设置查看器大小。

  4. 创建和初始化查看器。

  5. 将查看器JavaScript文件添加到网页。

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

<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>
  1. 定义容器DIV。

    向要显示查看器的页面添加一个空DIV元素。 DIV元素必须定义其ID,因为此ID稍后将传递到查看器API。

    占位符DIV是一个定位元素,这意味着 position CSS属性设置为 relativeabsolute.

    以下是定义的占位符DIV元素的示例:

    code language-html
    <div id="s7viewer" style="position:relative"></div>
    
  2. 设置查看器大小

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

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

    请参阅 自定义eCatalog查看器 有关使用CSS为查看器设置样式的更多信息。

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

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

    您可以设置 stagesize 在Dynamic Media Classic中的查看器预设记录中进行修饰符,或通过查看器初始化代码将其显式传递 params 收藏集,或作为API调用(如命令引用部分所述),如下所示:

    code language-html
    eCatalogSearchViewer.setParam("stagesize",
    "640,480");
    
  3. 正在初始化查看器。

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

    必须将查看器容器添加到DOM,以便查看器代码可以按其ID查找容器元素。 某些浏览器会延迟构建DOM,直到网页结尾。 但是,要获得最大的兼容性,请调用 init() 紧靠结束位置之前的方法 BODY 标记上,或主体上 onload() 事件。

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

    以下示例用于创建查看器实例,将所需的最少配置选项传递给构造函数,并调用 init() 方法。 此示例假定 eCatalogSearchViewer 是查看器实例; s7viewer 是占位符的名称 DIVhttps://s7d1.scene7.com/is/image/ 是图像服务URL,并且 Viewers/Pluralist 是资产:

    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>
    

    以下代码是嵌入eCatalog搜索查看器且大小固定的普通网页的完整示例:

    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>
    

高度不受限制的响应式设计嵌入

通过响应式设计嵌入,网页通常具有某种灵活的布局,可指定查看器容器的运行时大小 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>

将查看器添加到此类页面与嵌入固定大小类似,唯一的区别是无需明确定义查看器大小。

  1. 将查看器JavaScript文件添加到网页。
  2. 定义容器DIV。
  3. 创建和初始化查看器。

上述步骤与嵌入固定大小相同。 添加容器 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 并将其置于浏览器窗口中居中。 此外,该网页还设置 HTMLBODY 元素至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构造函数不接受任何参数,并且配置参数使用以下方式指定: 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>
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8