Flyout

Flyout Viewer is an image viewer. It displays a static image with the zoomed version shown in the flyout view that a user activates. This viewer works with image sets and navigation is done by using swatches. It is designed to work on desktops and mobile devices.

Viewer type is 504.

See System requirements and prerequisites.

Demo URL

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

Using Flyout Viewer

Flyout Viewer represents a main JavaScript file and a set of helper files (a single JavaScript include with all Viewer SDK components used by this particular viewer, assets, CSS) downloaded by the viewer in runtime

Flyout Viewer is only intended for embedded use, which means that it is integrated into the web page using documented API. No production-ready web page is available for the Flyout Viewer.

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

See Command reference common to all viewers - Configuration attributes and Command reference common to all Viewers - URL

Interacting with Flyout Viewer

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

The viewer also supports both touch input and mouse input on Windows devices with touch screen and mouse. This support, however, is limited to Chrome, Internet Explorer 11, and Edge web browsers only.

This viewer is fully keyboard accessible.

See Keyboard accessibility and navigation.

Embedding Flyout Viewer

Different web pages have different needs for viewer behavior. The web page may have static page layout, or use responsive design that displays differently on different devices, or for different browser window sizes. To accommodate these needs, the viewer supports two primary operation modes: fixed size embedding and responsive design embedding.

Fixed size embedding mode is used when the viewer does not change its size after its initial load. This choice is best for web pages that have a static page layout.

Responsive design embedding mode assumes that the viewer must resize during runtime in response to the size change of its container DIV. The most common use case is adding a viewer to a web page that uses a flexible page layout.

When using responsive design embedding mode with the Flyout Viewer, make sure that you specify explicit breakpoints for the main view image using the imagereload parameter. Ideally, match your breakpoints with the viewer width breakpoints as dictated by the web page CSS.

In responsive design embedding mode, the viewer behaves differently depending on the way a web page container DIV is sized. If the web page sets only the width of the container DIV, leaving its height unrestricted, then the viewer automatically chooses its height according to the aspect ratio of the asset that is used. This functionality means that the asset fits perfectly into the view without any padding on the sides. This particular use case is the most common for web pages that use responsive design layout frameworks like Bootstrap and Foundation.

Otherwise, if the web page sets both the width and the height for the viewer’s container DIV, then the viewer fills only that area and follows the size provided by the web page layout. A good use case example is embedding the viewer into a modal overlay, where the overlay is sized according to web browser window size.

Fixed size embedding

You add the viewer to a web page by doing the following:

<s7viewers_root>/html5/js/FlyoutViewer.js

You can use a relative path if the viewer is deployed on one of the Adobe Dynamic Media servers and it is served from the same domain. Otherwise, you specify a full path to one of Adobe Dynamic Media servers that have the IS-Viewers installed.

A relative path looks like the following:

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

Responsive design embedding with unrestricted height

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. For the following example, assume that the web page allows the viewer’s container DIV to take 40% of the web browser window size, leaving its height unrestricted. The web page HTML code would look like the following:

<!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. The only difference is that you must override the fixed sizing from the default viewer CSS with the size set in relative units.

All the steps above are the same as with the fixed size embedding with the following three exceptions:

#s7viewer.s7flyoutviewer {
 width: 100%;
 height: 100%;
}

The following code is a complete example. Notice how the viewer size changes when the browser is resized, and how the viewer aspect ratio matches the asset.

<!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>

The following examples page illustrates more real-life uses of responsive design embedding with unrestricted height:

Live demos

Alternate demo location

Flexible size embedding with width and height defined

If there is flexible-size embedding with width and height defined, the web page styling is different. It provides both sizes to the "holder" DIV and centers it in the browser window. Also, the web page sets the size of the HTML and BODY element to 100 percent.

<!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>

The rest of the embedding steps are identical to the steps used for responsive design embedding with unrestricted height. The resulting example is the following:

<!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>

Embedding using Setter-based API

Instead of using JSON-based initialization, it is possible to use setter-based API and no-args constructor. Using this API constructor does not take any parameters and configuration parameters are specified using setContainerId(), setParam(), and setAsset() API methods, with separate JavaScript calls.

The following example illustrates using fixed size embedding with setter-based 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>