Class s7sdk.image.FlyoutZoomView

The FlyoutZoomView is an image viewing component that displays an image served by Adobe Image Serving. It implements a fast and simple flyout zoom viewer. You can zoom into the image by moving the mouse over the main view; the zoomed in region will be displayed in the flyout window. Moving the mouse outside the main view area will close the flyout window. In touch enabled browsers, flyout window is triggered when touching the main view, and hidden when touch gesture is completed.

Customizing Behavior Using Modifiers

Modifiers change FlyoutZoomView default behavior. They are passed to the component by the ParameterManager instance specified in the constructor.

The following modifiers are supported:

Modifier	Syntax	Description	Default
serverurl	isRootPath	The Adobe Image Serving root path. If no domain is specified, the domain from which the page is served is applied instead. Standard URI path resolution applies.	/is/image/
asset	image	The Adobe Image Serving catalog/image ID of the image to display.
iscommand	value	The Adobe Image Serving command string that is applied to the image when requesting image data. If specified in the URL, all occurrences of '&' and '=' must be HTTP-encoded as `%26` and `%3D`, respectively.
zoomfactor	[primaryFactor][,[secondaryFactor][,upscale]]	Specifies the image magnification for the flyout view, relative to the main view. The value must be an integer or floating point value 1.0 or larger. You can specify an optional secondary factor that is accessible by clicking the main view when the highlight is active. Clicking a second time reverts to the primary zoom factor. A value of -1 disables the secondary zoom factor. Use upscale to control how the component works with images smaller than the main view, or the flyout window, or both. When upscale is set to `1` the component upscales the main image so that it fits into the main view. It also upscales the zoom image so that it completely fills the configured flyout window area. If upscale is set to `0` small images display at their original resolution. They are also centered in the main view area and inside the flyout window. You can configure the extra white space that appears around the image. Use `background` or a similar CSS property of the `s7flyoutzoomview` and `s7flyoutzoom` CSS classes in the main view and flyout window, respectively.	3,-1,1
frametransition	none\|fade[,duration]	Specifies the type and duration of the effect applied to the main view on asset change. Set `none` for no transition. That is, the main view change occurs instantly. Use `fade` to activate a cross-fade transition where the old image fades out and the new image fades in. Fade animation duration is controlled by duration as set in seconds. The default is 0.3 seconds.	none,0.3
flyouttransition	[none\|slide\|fade][,showtime[,showdelay[,hidetime[,hidedelay]]]]	Specifies the type of effect that is applied when the flyout view is displayed or hidden. Set `showtime` to specify the number of seconds that the show animation takes to complete. Set `showdelay` to specify the delay in seconds between user action which initiates the show animation and the beginning of the show animation itself. Set `hidetime` to specify the number of seconds that the hide animation takes to complete. Set `hidedelay` to specify the delay in seconds between user action which initiates the hide animation and the beginning of hide animation itself.	fade,1,0,1,0
transition	[none\|slide\|fade][,duration]	Specifies the type of effect that is applied when the flyout view is shown or hidden. Use `duration` to specify the number of seconds that the animation takes to complete. (*Deprecated*: now use `flyouttransition` to specify the transition parameters).	fade, 1
preloadtiles	0\|1[,0\|1]	Set the first option to `1` to enable preloading of the zoomed image. Or, set to `0` to load the zoom image incrementally, as needed. The second option controls whether to reload the zoomed image during component resize, when a new width breakpoint is achieved as set in the `imagereload` modifier. Caution If you enable this option, it results in substantially higher bandwidth usage because the zoomed image is loaded in its entirety, even if no zoom action is taken by the user.	0
imagereload	0\|1[,breakpoint,width[;width]]	Configures how the component fetches new images for the main and flyout view during resize. When set to `0`, the component does not load new images during resize, and image resolution in the flyout view does not change. Setting to `1,breakpoint,width[;width]` lets you specify one or more width breakpoints for the image loaded into the main view. The component always uses the best fit size for the initial load. After resize, it ensures that the image in the main view is always downloaded using the width equal to the closest bigger breakpoint, and downscaled on the client.	0
tip	duration[,count][,fade]	Specifies the display behavior for the tip text. Use `duration` to specify the number of seconds that the text is displayed before it hides. When `duration` is set to -1, the message always displays, even if the user activates the flyout. Use count to specify the number of times the text is displayed when new images are viewed in the set. A value of -1 means that the text always displays when viewing any image in the set. Use fade to specify the duration of a fade animation that occurs when the text appears or disappears. A value of 0 indicates no fade transition.	3,1,0.3
overlay	0\|1	Controls the main view highlight appearance when the flyout is active. When set to `0`, the area currently visible in the flyout window is highlighted using styles provided by either `.s7highlight` or `.s7cursor` CSS class names, depending on the value of `highlightmode` modifier. When set to `1`, the component enters "inverse" mode. That is, the currently viewed area is either fully transparent (`highlightmode` is set to `highlight`) or styled with `.s7cursor` CSS class name (`highlightmode` is set to `cursor`), but the surrounding area is filled using styles provided by `.s7overlay` CSS class name.	0
fmt	jpg\|jpeg\|png\|png-alpha\|gif\|gif-alpha	Specifies the image format used by the component for loading images from Image Server. It is any value supported by Image Server and the client browser. If the image_format ends with "-alpha", the component renders images as transparent. For all other image format values the component treats images as opaque. You cannot use transparent images with `fade` type of `flyouttransition` in Internet Explorer 7 and 8 due to web browser limitations. In this case, the component does not play fade animation. Instead, it preserves the rest of the timing settings provided with `flyouttransition`.	jpeg
highlightMode	highlight\|cursor[,showtime[,onimage\|free]]	Specifies the type of navigation frame to use. When set to `cursor`, the component uses a fixed-size reference cursor. It is possible to have different cursor art for desktop systems and touch devices using `.s7cursor` CSS class and `input=mouse\|touch` attribute selector. On desktop systems, an anchor point is set in the middle of the cursor area. On touch devices, an anchor is located in the bottom center of the cursor. When set to `highlight`, the component uses a variable-size navigation frame. The size and shape of the frame depends on the zoom factor and the size of the flyout view. Use showtime to set the time in seconds that it takes highlight or cursor to fade in after activated by the user. Fade in is applied only on touch devices. On desktop systems it is ignored by the component. Fade in applies to the following user interface elements: highlight frame, fixed cursor, overlay (in case `overlay` modifier is set to `1`). Flyout view animation begins only after a highlight or cursor fade in animation completes. There is no fade out animation when a user deactivates the flyout. Corresponding user interface elements such as cursor, highlight, and overlay, hide instantly. onimage and free options control navigation frame positioning. When set to onimage the navigation frame can only be positioned inside the actual image area in the main view. Otherwise, if it is set to free, a user can move the navigation frame anywhere in the logical main view area, even outside the image content.	highlight,0.1,onimage
enableHD	always\|never\|limit,number	Enable, limit, or disable optimization for devices where devicePixelRatio is greater than 1 such as devices with a high-density display like iPhone4 and similar devices. If activated, the component limits the size of the IS image request as if the device had a pixel ratio of one thereby reducing the bandwidth. If using the limit setting, the component enables high pixel density only up to the specified limit.	limit,1500

Defining the Appearance using CSS

You can define the appearance of the FlyoutZoomView component using CSS rules. All Adobe Experience Viewers HTML5 SDK components use class selectors for styling. You can define the appearance of the FlyoutZoomView component using the .s7flyoutzoomview class selector. The styles associated with this class selector are applied to all instances of the FlyoutZoomView component. You can style particular instances by prefixing the class rule with the instance #id. For example, styling rules for #myComp.s7flyoutzoomview are applied only to the particular FlyoutZoomView instance.

The styling of the sub-elements using class selectors like .s7flyoutzoom for example, must be specified in the form of the descendant class selectors, that is, they must follow the main class selector separated by a space, such as .s7flyoutzoomview .s7flyoutzoom. For more information on component styling see the Adobe Experience Viewers HTML5 SDK User Guide and the default styles section.

CSS Class	Attribute Selector	Description
`.s7flyoutzoomview`	(None)	Represents the main body of the `FlyoutZoomView` component.
`.s7highlight`	(None)	Defines the appearance of the highlight area in the main view, used when `overlay` modifier is set to `0` and `highlightmode` modifier is set to `highlight`.
`.s7cursor`	`input=[mouse\|touch]`	Defines the appearance of the fixed cursor area in the main view, used when `highlightmode` modifier is set to `cursor`. The class must define explicit cursor size using `width` and `height` properties. It is possible to specify different cursor art for desktop systems and touch devices using `input` attribute selector.
`.s7overlay`	(None)	Defines the appearance of the highlight area in the main view, used when `overlay` modifier is set to `1`
`.s7flyoutzoom`	(None)	Defines the appearance of the flyout area. To control the positioning of the flyout area, `position: absolute;` should be included with the `left` and `top` elements.
`.s7tip`	(None)	Defines the appearance of the tip text.

Localizable Symbols

The FlyoutZoomView also has a number of text symbols that you can localize either in a preset or in the viewer page though the mechanisms provided by the ParameterManager. For more information on localization consult the ParameterManager API documentation and Adobe Experience Viewers HTML5 SDK User Guide.

Symbol	Description
`FlyoutZoomView.TIP_BUBBLE_OVER`	Define a localized tip text in case flyout is activated on roll over
`FlyoutZoomView.TIP_BUBBLE_TAP`	Define a localized tip text in case flyout is activated by touch gesture
`FlyoutZoomView.ROLE_DESCRIPTION`	Define a localized "aria-roledescription" of `FlyoutZoomView`
`FlyoutZoomView.USAGE_HINT`	Define a localized text for "aria-describedby" of `FlyoutZoomView`

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.image.FlyoutZoomView(container, settings, compId)

Method Summary
Method Attributes	Method Name and Description
	addEventListener(type, handler, useCapture) Adds an event listener to the instance of the `FlyoutZoomView` component.
	dispose() Dispose is used to remove itself and all sub-elements from the DOM
	getComponent() Gets the reference to the component since the constructor function returns a dynamic wrapper not the component itself.
	getHeight() Returns the current inner height of the component.
	getWidth() Returns the current inner width of the component.
	resize(width, height) Sets the main view of FlyoutZoomView to the specified width and height.
	setAsset(assetName) Changes the currently active asset/set.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component
	setItem(item) Sets the currently displayed image as defined by the image descriptor.
	setModifier(modObj) Sets 1-N # of modifiers for the component.

Class Detail

s7sdk.image.FlyoutZoomView(container, settings, compId)

Example Code
This example demonstrates how to use the FlyoutZoomView component in a simple viewer. In this example a Container object
and a FlyoutZoomView object are created. Whenever a user rolls their cursor over the FlyoutZoomView object, the object
expands to the right of the image to display an enlarged (zoomed in) view of the highlighted image area under the cursor.


The code below does the following:

The Adobe Experience Viewers HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
CSS Styles are defined in the document head to control the appearance of the FlyoutZoomView component.
The s7sdk.Util.init() method is called to initialize the SDK.
A ParameterManager object is created to handle component modifiers for the viewer.
An initViewer() function is defined. This function initializes a couple of modifiers (hard coded for example purposes),
and sets localized strings to be displayed as tooltips by the FlyoutZoomView component when a user interacts with it.
It then creates the component objects required for this simple example.
An event listener is added to the ParameterManager object that designates the initViewer() function as the handler
to call when the Adobe Experience Viewers HTML5 SDK is loaded and ready.
Finally, the init() method is called on the ParameterManager object to start the viewer.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>FlyoutZoomView Example</title>

        <!-- To run this example locally you need to replace this with an absolute SDK path.
             For more information check the Adobe Experience Viewers HTML5 SDK User Guide or the examples
             included in the package.
        -->
        <script language="javascript" type="text/javascript"
                src="../js/s7sdk/utils/Utils.js"></script>

        <script language="javascript" type="text/javascript">
            s7sdk.Util.lib.include('s7sdk.image.FlyoutZoomView');
            s7sdk.Util.lib.include('s7sdk.common.Container');
        </script>

        <style type="text/css" media="screen">
            .s7flyoutzoomview {
                width: 300px;
                height:400px;
                position:relative;
                border:1px solid #c2c2c2;
             }
            .s7flyoutzoomview .s7highlight {
                opacity:0.2;
                background-color: #000000;
             }
            .s7flyoutzoomview .s7flyoutzoom {
                width:400px;
                height:400px;
                left:305px;
                top:0px;
                position:absolute;
                border:1px solid #c2c2c2;
             }
        </style>

    </head>
    <body>

        <div id="s7container"></div>
        <script type="text/javascript" language="JavaScript">
            var params, container, flyoutView;

            // Initialize the SDK
            s7sdk.Util.init();

            // Create ParameterManager instance to handles modifiers
            params = new s7sdk.ParameterManager();

            // Define the function that initializes the viewer
            function initViewer(){
                // Set hardcoded modifiers (not required when values are specified on the url)
                params.push("serverurl", "https://s7d1.scene7.com/is/image");
                params.push("asset", "demo/bedroom.tif");

                // Create the Container component object
                container = new s7sdk.Container(null, params, "s7container");

                // Create the FlyoutZoomView component object
                flyoutView = new s7sdk.image.FlyoutZoomView(container, params);
            }

            // The ParameterManager will dispatch SDK_READY when all modifiers have been processed
            // and it is safe to initialize the viewer
            params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false);

            // Now it is safe to process the modifiers, the callbacks have been defined
            // this will trigger the SDK_READY event
            params.init();
        </script>
    
    </body>
</html>

Default styles for FlyoutZoomView:

.s7flyoutzoomview {
	position:relative;
	width: 360px;,  
	height:480px;
	-moz-user-select:-moz-none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-ms-user-select:none;
	user-select:none;
	border:1px solid #c2c2c2;
 }
.s7flyoutzoomview .s7highlight {
	opacity:0.6;
	background-color:#FFFFFF;
 }
.s7flyoutzoomview .s7cursor[input='mouse'] {
	width:80px;
	height:80px;
	background-image:url(images/sdk/zoom-cursor-desktop.png);
 }
.s7flyoutzoomview .s7cursor[input='touch'] {
	width:80px;
	height:100px;
	background-image:url(images/sdk/zoom-cursor-tablet-1x.png);
 }
.s7flyoutzoomview .s7overlay {
	opacity:0.6;
	background-color:#FFFFFF;
 }
.s7flyoutzoomview .s7flyoutzoom {
	width:600px;
	height:480px;
	left:365px;
	top:0px;
	position:absolute;
	border:1px solid #c2c2c2;
	-webkit-transform: translateZ(0px);
 }
.s7flyoutzoomview .s7tip {
	position:absolute;
	bottom:50px;
	color:#ffffff;
	font-family:Arial;
	font-size:12px;
	padding-bottom:10px;
	padding-top:10px;
	padding-left:12px;
	padding-right:12px;
	background-color:#000000;
	border-radius:4px;
	-webkit-transform:translateZ(0px);
	opacity:0.5;
 }

Parameters:
{String|Container} container: The reference to Container instance or the ID of the parent DOM element to which the component is added as a child
{s7sdk.ParameterManager} settings: A parameter manager instance that represents the desired configuration.
{String} compId: An optional parameter that specifies the ID of the components DOM element

See:: s7sdk.ParameterManager

Method Detail

addEventListener(type, handler, useCapture)

Adds an event listener to the instance of the FlyoutZoomView component. The handler function receives a DOM event object of type Event. The object contains a property s7event, which references the associated custom event object, for example s7sdk.event.FlyoutEvent.

The events supported by the component are:

s7sdk.event.FlyoutEvent.NOTF_FLYOUT_SHOW_START - Dispatched when flyout window begins to appear, for example due to roll over on the main view. s7sdk.event.FlyoutEvent

s7sdk.event.FlyoutEvent.NOTF_FLYOUT_HIDE_END - Dispatched when flyout window completely disappears, for example due to roll out from the main view. s7sdk.event.FlyoutEvent

s7sdk.event.StatusEvent.NOTF_ASSET_METADATA_READY - Dispatched when component receives asset metadata. If the component is initialized with setItem() it dispatches instantly inside that API call. Otherwise if the component loads req=set on its own, this event is sent when component has received and parsed req=set. s7sdk.event.StatusEvent

s7sdk.event.StatusEvent.NOTF_VIEW_READY - Dispatched when component fills the main view entirely with image data. It is sent only once after asset swap. s7sdk.event.StatusEvent

s7sdk.event.StatusEvent.NOTF_PRELOAD_START - Dispatched when the component begins to preload tiles for the zoom image in case preloadtiles modifier is turned on. s7sdk.event.StatusEvent

s7sdk.event.StatusEvent.NOTF_PRELOAD_COMPLETE - Dispatched when the component preloads all tiles for the zoom image in case preloadtiles modifier is turned on. s7sdk.event.StatusEvent

Parameters:
{String} type: Event name, for example s7sdk.event.FlyoutEvent.NOTF_FLYOUT_SHOW_START.
{Function} handler: Function to be called when the event gets dispatched.
{Boolean} useCapture: Register capture phase.

See:: s7sdk.event.FlyoutEvent

dispose()

Dispose is used to remove itself and all sub-elements from the DOM

{s7sdk.image.FlyoutZoomView} getComponent()

Gets the reference to the component since the constructor function returns a dynamic wrapper not the component itself. You should NEVER store a reference returned by this API call since the component might have been rebuilt since your last call.

Returns:: {s7sdk.image.FlyoutZoomView} The reference to the core component the caller is a proxy for.

{Number} getHeight()

Returns the current inner height of the component.

Returns:: {Number} the inner height of the component, in pixels.

{Number} getWidth()

Returns the current inner width of the component.

Returns:: {Number} the inner width of the component, in pixels.

resize(width, height)

Sets the main view of FlyoutZoomView to the specified width and height. The image in the main view will be refetched from the server if the size reaches new breakpoint defined by imageReload modifier, otherwise it will be scaled by the web browser. The size of the flyout view will change proportionally to the size change of the main view, with possible adjustments to avoid whitespace around flyout image. The resolution of the flyout image will change in sync with breakpoint change of the main view.

Parameters:
{Number} width: - The width of the component, in pixels.
{Number} height: - The height of the component, in pixels.

setAsset(assetName)

Changes the currently active asset/set. The component invalidates and rebuilds using the existing serverurl and the new asset after retrieving the asset/set definition from Adobe Image Serving. Unless the asset has not been set already, this call generates a SWAP tracking event that is managed by the TrackingManager component. Preferred way of changing the displayed image though is by simply calling setItem() API.

Parameters:
{String} assetName: - The catalog ID of the asset/set.

See:: s7sdk.TrackingManager

setCSS(classname, property, value)

Sets a particular CSS class and property on a component

Parameters:
{String} classname: The CSS classname to use for this style. i.e. .s7flyoutzoomview
{String} property: The CSS property that is being set. i.e. position
{String} value: The CSS property value being set. i.e. relative

setItem(item)

Sets the currently displayed image as defined by the image descriptor. The descriptor must be of the ImageDesc type and it usually supplied by the s7sdk.event.AssetEvent event in response to the swatches selection change.

Parameters:
item: {s7sdk.ImageDesc} The item descriptor of the image to display.

See:: s7sdk.set.MediaSet; s7sdk.ImageDesc; s7sdk.set.Swatches; s7sdk.event.AssetEvent

setModifier(modObj)

Sets 1-N # of modifiers for the component.

Parameters:
{Object} modObj: A simple JSON object with name:value pairs of valid modifiers for a particular component

Namespaces

Classes in s7sdk.image

Class s7sdk.image.FlyoutZoomView