eCatalog ecatalog
eCatalog Viewer是一种目录查看器,以跨页或逐页方式在跨页中显示电子小册子。 eCatalog允许用户使用其他用户界面元素或专用缩略图模式浏览目录。 用户还可以放大每个页面以获取更多详细信息。
查看器类型507。
请参阅系统要求和先决条件。
此查看器可与eCatalog配合使用,并且支持可选的图像映射和社交共享工具。 它具有缩放工具、目录导航工具、全屏支持、缩略图和可选的关闭按钮。 查看器还支持社交共享工具、打印、下载和收藏夹。 它设计为可在台式机和移动设备上工作。
演示URL section-e1c3106f5b3e445d9b95be337c2f94e2
https://s7d1.scene7.com/s7viewers/html5/eCatalogViewer.html?asset=Viewers/Pluralist
使用eCatalog查看器 section-e6c68406ecdc4de781df182bbd8088b4
eCatalog查看器表示主JavaScript文件和查看器在运行时下载的一组帮助程序文件(单个JavaScript包含此特定查看器使用的所有Viewer SDK组件、资源、CSS)
您可以使用随IS-Viewers提供的生产就绪型HTML页在弹出模式下使用eCatalog Viewer,也可以使用嵌入式模式,在嵌入式模式下,使用文档记录的API将其集成到目标网页中。
其配置和外观设计与其他查看器的配置和外观设计类似。 所有外观设计都是通过自定义CSS实现的。
查看所有查看者通用的命令引用 — 配置属性和所有查看者通用的命令引用 — URL
与eCatalog查看器交互 section-642e66ca38cd4032992840ec6c0b0cd2
eCatalog Viewer支持其他移动设备应用程序中常见的以下触控手势。
当图像处于重置状态时,它将执行本机页面滚动。
当缩略图处于活动状态时,它会滚动缩略图列表。
可以为在目录页面之间导航启用逼真的页面翻转动画效果。 在这种情况下,用户可以按住并拖动页面拐角并翻转页面。
此查看器还支持在带有触摸屏和鼠标的Windows设备上输入触摸和鼠标。 但是,此支持仅适用于Chrome、Internet Explorer 11和Edge Web浏览器。
此查看器完全可使用键盘,如键盘辅助功能和导航中所述。
使用eCatalog查看器的社交媒体共享工具 section-eb575084a99647c3a9591f439f40b412
eCatalog查看器支持社交共享工具。 它们作为主控件栏中的按钮提供,当用户单击或点按它时,该按钮将扩展为共享工具栏。
共享工具栏包含各种支持的共享渠道类型的图标,包括Facebook、Twitter、电子邮件共享、嵌入代码共享和链接共享。 激活电子邮件共享、嵌入共享或链接共享工具后,查看器会显示一个模式对话框,其中包含相应的数据输入表单。 调用Facebook或Twitter时,查看器会将用户从社交服务重定向到标准共享对话框。 由于Web浏览器安全限制,共享工具在全屏模式下不可用。
嵌入eCatalog查看器 section-6bb5d3c502544ad18a58eafe12a13435
不同的网页对查看者的行为具有不同的需求。 有时,网页会提供一个链接,选中该链接后,会在单独的浏览器窗口中打开查看器。 在其他情况下,需要直接将查看器嵌入到托管页面中。 在后一种情况下,网页可能具有静态页面布局,或者使用响应式设计,该设计在不同的设备上或对于不同的浏览器窗口大小显示不同。 为了满足这些需求,查看器支持三种主要操作模式:弹出窗口、固定大小嵌入和响应式设计嵌入。
关于弹出模式
在弹出模式下,查看器将在单独的Web浏览器窗口或选项卡中打开。 它采用整个浏览器窗口区域,并在浏览器调整大小或移动设备的方向更改时进行调整。
弹出模式是移动设备中最常见的一种模式。 该网页使用window.open()
JavaScript调用、正确配置的A
HTML元素或任何其他合适的方法加载查看器。
建议您为弹出操作模式使用现成的HTML页面。 在这种情况下,该文件夹名为eCatalogViewer.html,位于标准IS-Viewers部署的html5/子文件夹中:
<s7viewers_root>/html5/eCatalogViewer.html
您可以通过应用自定义CSS来实现可视化自定义。
以下是在新窗口中打开查看器的HTML代码示例:
<a href="https://s7d1.scene7.com/s7viewers/html5/eCatalogViewer.html?asset=Viewers/Pluralist" target="_blank">Open popup viewer</a>
关于固定大小嵌入模式和响应式设计嵌入模式
在嵌入模式下,查看器将添加到现有网页,这些网页可能已有一些与查看器无关的客户内容。 查看者通常只占用网页不动产的一部分。
主要用例是面向台式机或平板电脑设备的网页,以及根据设备类型自动调整布局的响应式设计页面。
当查看器在初始加载后未更改其大小时,使用固定大小嵌入。 对于具有静态布局的网页,此方法为最佳选择。
响应式设计嵌入假定查看器必须在运行时调整大小以响应其容器DIV
的大小更改。 最常见的用例是将查看器添加到使用灵活页面布局的网页。
在响应式设计嵌入模式下,查看器的行为方式有所不同,具体取决于网页调整其容器DIV
大小的方式。 如果网页仅设置容器DIV
的宽度,而不限制其高度,则查看器会根据所用资源的长宽比自动选择其高度。 此功能可确保资产完全适合视图,不会出现任何边距。 此用例最常见于使用响应式布局框架(如Bootstrap和Foundation)的网页。
否则,如果网页同时设置了查看器容器DIV
的宽度和高度,则查看器仅填充该区域,并遵循网页布局提供的大小。 一个很好的示例是将查看器嵌入到模式叠加中,其中叠加根据Web浏览器窗口大小调整大小。
固定大小嵌入
通过执行以下操作将查看器添加到网页:
-
正在将查看器JavaScript文件添加到您的网页。
-
定义容器DIV。
-
设置查看器大小。
-
创建和初始化查看器。
-
正在将查看器JavaScript文件添加到您的网页。
创建查看器需要您在HTML头中添加脚本标记。 在使用查看器API之前,请确保包括eCatalogViewer.js。 eCatalogViewer.js文件位于标准IS-Viewers部署的html5/js/子文件夹下:
<s7viewers_root>/html5/js/eCatalogViewer.js
如果查看器部署在某个Adobe Dynamic Media Classic服务器上,并且来自同一域,则可以使用相对路径。 否则,您需要为其中一台安装了IS-Viewers的Adobe Dynamic Media Classic服务器指定完整路径。
相对路径如下所示:
<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/eCatalogViewer.js"></script>
include
文件。 请勿在网页代码中引用任何其他JavaScript文件,这些文件可能由查看器的逻辑在运行时下载。 特别是,请勿直接引用查看器从/s7viewers
上下文HTML加载的库SDK Utils.js
库(所谓的统一SDK include
)。 原因是Utils.js
或类似的运行时查看器库的位置完全由查看器的逻辑管理,并且查看器版本之间的位置会发生变化。 Adobe不会在服务器上保留旧版本的辅助查看器includes
。include
会破坏查看器功能。-
定义容器DIV。
向要显示查看器的页面添加一个空DIV元素。 DIV元素必须定义其ID,因为此ID稍后将传递到查看器API。
占位符DIV是定位元素,这意味着
position
CSS属性设置为relative
或absolute
。以下是定义的占位符DIV元素的示例:
code language-html <div id="s7viewer" style="position:relative"></div>
-
设置查看器大小
您可以通过声明查看器为
.s7ecatalogviewer
顶级CSS类(以绝对单位表示)或使用stagesize
修饰符来设置查看器的静态大小。您可以在“HTML”页面上直接放置在CSS中的大小。 或者,将大小调整放入自定义查看器CSS文件中,该文件随后将分配给Dynamic Media Classic中的查看器预设记录,或者使用样式命令显式传递。
有关使用CSS设置查看器样式的详细信息,请参阅自定义eCatalog查看器。
以下是在“HTML”页中定义静态查看器大小的示例:
code language-html #s7viewer.s7ecatalogviewer { width: 640px; height: 480px; }
您可以在Dynamic Media Classic中的查看器预设记录中设置
stagesize
修饰符。 或者,您也可以使用params
集合的查看器初始化代码显式传递它,或作为API调用传递,如命令引用部分中所述,如下所示:code language-html eCatalogViewer.setParam("stagesize", "640,480");
-
正在初始化查看器。
完成上述步骤后,创建
s7viewers.eCatalogViewer
类的实例,将所有配置信息传递到其构造函数,并在查看器实例上调用init()
方法。 配置信息作为JSON对象传递给构造函数。 此对象至少具有containerId
字段,该字段保存了查看器容器ID的名称,并嵌套params
JSON对象,其中包含查看器支持的配置参数。 在这种情况下,params
对象必须至少将图像服务URL作为serverUrl
属性传递,并将初始资产作为asset
参数传递。 基于JSON的初始化API允许您通过一行代码创建和启动查看器。必须将查看器容器添加到DOM,以便查看器代码可以按其ID查找容器元素。 某些浏览器会延迟构建DOM,直到网页结尾。 但是,为了最大程度地兼容,请在结束
BODY
标记之前或主体onload()
事件上调用init()
方法。同时,容器元素还不一定是网页布局的一部分。 例如,可以使用分配给它的
display:none
样式隐藏它。 在这种情况下,查看器会延迟其初始化过程,直到网页将容器元素带回布局为止。 执行此操作后,查看器加载将自动继续。以下是创建查看器实例、将所需的最少配置选项传递给构造函数以及调用
init()
方法的示例。 该示例假设eCatalogViewer
是查看器实例;s7viewer
是占位符DIV
的名称;https://s7d1.scene7.com/is/image/
是图像服务URL,Viewers/Pluralist
是资源:code language-html <script type="text/javascript"> var eCatalogViewer = new s7viewers.eCatalogViewer({ "containerId":"s7viewer", "params":{ "asset":"Viewers/Pluralist", "serverurl":"https://s7d1.scene7.com/is/image/" } }).init(); </script>
以下代码是一个简单网页的完整示例,该网页以固定大小嵌入了eCatalog查看器:
code language-html <!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://s7d1.scene7.com/s7viewers/html5/js/eCatalogViewer.js"></script> <style type="text/css"> #s7viewer.s7ecatalogviewer { width: 640px; height: 480px; } </style> </head> <body> <div id="s7viewer" style="position:relative"></div> <script type="text/javascript"> var eCatalogViewer = new s7viewers.eCatalogViewer({ "containerId":"s7viewer", "params":{ "asset":"Viewers/Pluralist", "serverurl":"https://s7d1.scene7.com/is/image/" } }).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/eCatalogViewer.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 eCatalogViewer = new s7viewers.eCatalogViewer({
"containerId":"s7viewer",
"params":{
"asset":"Viewers/Pluralist",
"serverurl":"https://s7d1.scene7.com/is/image/"
}
}).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/eCatalogViewer.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 eCatalogViewer = new s7viewers.eCatalogViewer({
"containerId":"s7viewer",
"params":{
"asset":"Viewers/Pluralist",
"serverurl":"https://s7d1.scene7.com/is/image/"
}
}).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/eCatalogViewer.js"></script>
<style type="text/css">
#s7viewer.s7ecatalogviewer {
width: 640px;
height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var eCatalogViewer = new s7viewers.eCatalogViewer();
eCatalogViewer.setContainerId("s7viewer");
eCatalogViewer.setParam("serverurl", "https://s7d1.scene7.com/is/image/");
eCatalogViewer.setAsset("Viewers/Pluralist");
eCatalogViewer.init();
</script>
</body>
</html>