弹出

弹出查看器是一个图像查看器。 它会显示一个静态图像,其缩放版本显示在用户激活的弹出视图中。 此查看器可处理图像集,并且导航过程可使用色板完成。 它适用于台式机和移动设备。

注意

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

查看器类型为504。

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

演示URL

https://s7d9.scene7.com/s7viewers/html5/FlyoutViewer.html?asset=Scene7SharedAssets/ImageSet-Views-Sample

使用弹出查看器

弹出查看器表示主JavaScript文件和一组帮助程序文件(单个JavaScript包含该查看器在运行时下载的该特定查看器、资产和CSS所使用的所有查看器SDK组件)

弹出查看器仅用于嵌入式使用,这意味着它是使用记录在案的API集成到网页中的。 弹出查看器没有可用于生产的网页。

Configuration and skinning are similar to that of the other viewers. You can use custom CSS to apply skinning.

请参阅 所有查看器通用的命令引用 — 配置属性所有查看器 — URL通用的命令引用

与弹出查看器交互

Flyout Viewer supports single-touch and multi-touch gestures that are common in other mobile applications.

手势

说明

单点按

激活弹出视图或主缩放级别和次缩放级别之间的更改。

水平轻扫或轻扫

Scrolls through the list of swatches in the swatch bar.

垂直轻扫

如果手势是在色板区域内完成的,则会执行本机页面滚动。

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

此查看器可完全通过键盘访问。

请参阅 键盘辅助功能和导航.

嵌入弹出查看器

不同网页对查看者行为的需求不同。 网页可能具有静态页面布局,或者使用响应式设计,该设计在不同设备上显示不同,或者针对不同的浏览器窗口大小显示不同。 为了满足这些需求,查看器支持两种主要操作模式:固定大小嵌入和响应式设计嵌入。

当查看器在初始加载后不更改其大小时,会使用固定大小嵌入模式。 此选项最适合具有静态页面布局的网页。

响应式设计嵌入模式假定查看器必须在运行时调整大小以响应其容器的大小变化 DIV. 最常见的用例是将查看器添加到使用灵活页面布局的网页。

在弹出查看器中使用响应式设计嵌入模式时,请确保使用 imagereload 参数。 理想情况下,请按照网页CSS的指示,将断点与查看器宽度断点进行匹配。

在响应式设计嵌入模式下,查看器的行为方式与网页容器的方式有所不同 DIV 大小。 如果网页仅设置容器的宽度 DIV,则查看器会保持高度不受限制,然后根据所使用资产的宽高比自动选择高度。 此功能意味着资产可以完美地放入视图中,且两侧没有任何边距。 对于使用响应式设计布局框架(如Bootstrap和基础)的网页,此特定用例最为常见。

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

固定大小嵌入

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

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

  2. 定义容器 DIV.

  3. 设置查看器大小。

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

  5. Adding the viewer JavaScript file to your web page.

    创建查看器要求您在HTML头中添加脚本标记。 Before you can use the viewer API, be sure that you include FlyoutViewer.js. FlyoutViewer.js is in the following html5/js/ subfolder of your standard IS-Viewers deployment:

<s7viewers_root>/html5/js/FlyoutViewer.js

如果查看器部署在其中一个Adobe的Dynamic Media服务器上,并且来自同一域,则可以使用相对路径。 否则,您将指定一个安装IS-Viewer的AdobeDynamic Media服务器的完整路径。

相对路径如下所示:

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/FlyoutViewer.js"></script>
注意

仅引用主查看器JavaScript include 文件。 请勿在网页代码中引用任何可能由查看器逻辑在运行时下载的其他JavaScript文件。 特别是,请勿直接引用HTML5 SDK Utils.js 查看器从 /s7viewers 上下文路径(所谓的整合SDK include)。 原因是 Utils.js 或者,查看器的逻辑以及查看器版本之间的位置更改将完全管理类似的运行时查看器库。 Adobe不会保留旧版次查看器 includes 在服务器上。

因此,应直接引用任何辅助JavaScript include 当部署了新产品版本时,查看器在页面上的使用会在未来中断查看器功能。

  1. 定义容器DIV。

    在希望查看器显示的页面中添加空DIV元素。 必须定义DIV元素的ID,因为此ID稍后会传递到查看器API。

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

    网页负责指定 z-index (表示占位符DIV元素)。 这样做可确保查看器的弹出部分显示在其他网页元素的顶部。

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

    <div id="s7viewer" style="position:relative;z-index:1"></div>
    
  2. 设置查看器大小。

    此查看器在处理多项目集时显示缩略图。 在桌面系统上,缩略图位于主视图的下方。 同时,查看器允许在运行时使用 setAsset() API。 作为开发人员,当新资产只有一个项目时,您可以控制查看器如何管理底部区域的缩略图区域。 可以保持外部查看器大小不变,并让主视图增加其高度并占用缩略图区域。 或者,您也可以将主视图大小保持为静态,并折叠外部查看器区域,使网页内容向上移动,然后使用缩略图中剩余的免费页面空间。

    要保持外部查看器范围不变,请定义 .s7flyoutviewer 以绝对单位表示的顶级CSS类。 CSS中的大小调整可以直接放在HTML页面上,或放在自定义查看器CSS文件中,稍后在Dynamic Media Classic中分配给查看器预设记录,或使用style命令显式传递。

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

    以下示例用于在HTML页中定义静态外部查看器大小:

    #s7viewer.s7flyoutviewer {
     width: 640px;
     height: 480px;
    }
    

    您可以在以下示例页面上看到具有固定外部查看器区域的行为。 请注意,在集之间切换时,外部查看器大小不会发生更改:

    https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/flyout/FlyoutViewer-fixed-outer-area.html?lang=zh-Hans?lang=zh-Hans

    要使主视图尺寸保持静态,请为内部定义以绝对单位表示的查看器大小 Container SDK组件使用 .s7flyoutviewer .s7container CSS选择器。 In addition, you should override the fixed size defined for the .s7flyoutviewer top-level CSS class in the default viewer CSS, by setting it to auto.

    以下是定义内部查看器大小的示例 Container SDK组件,以便在切换资产时,主视图区域不会更改其大小:

    #s7viewer.s7flyoutviewer {
     width: auto;
     height: auto;
    }
    #s7viewer.s7flyoutviewer .s7container {
     width: 640px;
     height: 480px;
    }
    

    以下示例页面显示主视图大小固定的查看器行为。 请注意,在集之间切换时,主视图保持静态,并且网页内容会垂直移动:

    https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/flyout/FlyoutViewer-fixed-main-view.html?lang=zh-Hans?lang=zh-Hans

    此外,默认查看器CSS为其现成外部区域提供了固定大小。

  3. Creating and initializing the viewer.

    When you have completed the steps above, you create an instance of s7viewers.FlyoutViewer class, pass all configuration information to its constructor and call init() method on a viewer instance. 配置信息作为JSON对象传递到构造函数。 此对象至少应具有 containerId 包含查看器容器ID和嵌套名称的字段 params 具有查看器支持的配置参数的JSON对象。 在本例中, params 对象必须至少将图像服务URL作为 serverUrl 资产,初始资产则作为 asset 参数。 通过基于JSON的初始化API,您可以使用一行代码创建和启动查看器。

    务必要将查看器容器添加到DOM,以便查看器代码可以按其ID查找容器元素。 某些浏览器会延迟构建DOM,直到网页结束。 For maximum compatibility, call the init() method just before the closing BODY tag, or on the body onload() event.

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

    以下示例用于创建查看器实例,将最小必需的配置选项传递给构造函数并调用 init() 方法。 该示例假定 flyoutViewer 为查看器实例; s7viewer 是占位符的名称 DIV; http://s7d1.scene7.com/is/image/ 是图像提供URL;和 Scene7SharedAssets/ImageSet-Views-Sample 是资产:

    <script type="text/javascript">
    var flyoutViewer = new s7viewers.FlyoutViewer({
     "containerId":"s7viewer",
    "params":{
     "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
     "serverurl":"http://s7d1.scene7.com/is/image/"
    }
    }).init();
    </script>
    

    以下代码是嵌入具有固定大小的弹出查看器的普通网页的完整示例:

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/FlyoutViewer.js"></script>
    <style type="text/css">
    #s7viewer.s7flyoutviewer {
     width: 640px;
     height: 480px;
    }
    </style>
    </head>
    <body>
    <div id="s7viewer" style="position:relative;z-index:1;"></div>
    <script type="text/javascript">
    var flyoutViewer = new s7viewers.FlyoutViewer({
     "containerId":"s7viewer",
    "params":{
     "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
     "serverurl":"http://s7d1.scene7.com/is/image/"
    }
    }).init();
    </script>
    </body>
    </html>
    

具有无限制高度的响应式设计嵌入

With responsive design embedding, the web page normally has some kind of flexible layout in place that dictates the runtime size of the viewer's container 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>

Adding the viewer to such a page is similar to the steps for fixed size embedding. 唯一的区别在于,您必须在大小以相对单位设置时,覆盖默认查看器CSS的固定大小。

  1. 将查看器JavaScript文件添加到网页。
  2. Defining the container DIV.
  3. 设置查看器大小。
  4. 创建和初始化查看器。

上述所有步骤与固定大小嵌入相同,但有以下三个例外:

  • 添加容器 DIV 至现有“持有人” DIV;
  • 添加 imagereload 具有明确断点的参数;
  • 与使用绝对单位设置固定查看器大小不同,CSS会将查看器宽度和高度设置为100%,如下所示:
#s7viewer.s7flyoutviewer {
 width: 100%;
 height: 100%;
}

以下代码是一个完整的示例。 请注意在调整浏览器大小时查看器大小的变化情况,以及查看器长宽比与资产的匹配情况。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/FlyoutViewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
#s7viewer.s7flyoutviewer {
 width: 100%;
 height: 100%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative;z-index:1"></div>
</div>
<script type="text/javascript">
var flyoutViewer = new s7viewers.FlyoutViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "imagereload":"1,breakpoint,200;400;800;1600"
}
}).init();
</script>
</body>
</html>

以下示例页面展示了在不受限制高度下响应式设计嵌入的更多实际用途:

实时演示

替代演示位置

定义宽度和高度的灵活大小嵌入

如果定义了宽度和高度的灵活大小嵌入,则网页样式会有所不同。 它为 "holder" 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="http://s7d1.scene7.com/s7viewers/html5/js/FlyoutViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
#s7viewer.s7flyoutviewer {
 width: 100%;
 height: 100%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative;z-index:1"></div>
</div>
<script type="text/javascript">
var flyoutViewer = new s7viewers.FlyoutViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "imagereload":"1,breakpoint,200;400;800;1600"
}
}).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/FlyoutViewer.js"></script>
<style type="text/css">
#s7viewer.s7flyoutviewer {
 width: 640px;
 height: 480px;
}
</style>
</head><body>
<div id="s7viewer" style="position:relative;z-index:1;"></div>
<script type="text/javascript">
var flyoutViewer = new s7viewers.FlyoutViewer();
flyoutViewer.setContainerId("s7viewer");
flyoutViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
flyoutViewer.setAsset("Scene7SharedAssets/ImageSet-Views-Sample");
flyoutViewer.init();
</script>
</body>
</html>

在此页面上