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 且位于 html5/ 标准IS-Viewers部署的子文件夹:
<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 文件位于 html5/js/ 标准IS-Viewers部署的子文件夹:
<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文件,这些文件可能会在运行时由查看器的逻辑下载。 特别是,请勿直接引用HTML5 SDK Utils.js
由查看器加载的库,从 /s7viewers
上下文路径(所谓的整合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中的查看器预设记录,或者使用样式命令显式传递。
请参阅 自定义eCatalog查看器 有关使用CSS为查看器设置样式的更多信息。
以下是在“HTML”页中定义静态查看器大小的示例:
code language-html #s7viewer.s7ecatalogviewer { width: 640px; height: 480px; }
您可以设置
stagesize
在Dynamic Media Classic中的查看器预设记录中的修饰符。 或者,您可以使用查看器初始化代码显式传递它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,直到网页结尾。 但是,要获得最大的兼容性,请调用
init()
紧靠结束位置之前的方法BODY
标记上,或主体上onload()
事件。同时,容器元素还不一定是网页布局的一部分。 例如,可以使用隐藏该内容
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构造函数不接受任何参数,并且配置参数使用以下方式指定: setContainerId()
, setParam()
、和 setAsset()
API方法具有单独的JavaScript调用。
以下示例显示使用基于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>