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