Flyout zoom view

The main view consists of the static image and the zoomed image shown in the flyout view. It also consists of the highlight navigation area that is displayed over the static image, and the tip message shown on top of the static image.

If the dimensions of the image being viewed do not match the dimensions of the flyout zoom view, the image content is centered within the flyout zoom view’s rectangle display area.

CSS properties of the main view

The appearance of the main view is controlled with the following CSS class selector:

.s7flyoutviewer .s7flyoutzoomview

Example - to make the main view transparent:

.s7flyoutviewer .s7flyoutzoomview {
 background-color: transparent;
}

CSS properties of the flyout view

The appearance of the flyout view is controlled with the following CSS class selector:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

Example - to set up a flyout view to 600 x 400 pixels, appearing with 100 pixels offset to the right of the 512 x 288 main view shown in the previous example:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom {
 left: 612px;
 top: 0px;
 width: 600px;
 height: 400px;
}

CSS properties of the highlight in the main view

The appearance of the highlight in the main view is controlled with the following CSS class selector:

.s7flyoutviewer .s7flyoutzoomview .s7highlight

It is possible to control background, border, transparency, and similar attributes using CSS. However, the size and position of highlight DOM element is managed by the viewer logic. Overriding it through CSS is not supported.

Example - to set up green highlight with 40% transparency and a one pixel red border:

.s7flyoutviewer .s7flyoutzoomview .s7highlight {
 background-color: green;
 opacity: 0.4;
 filter: alpha(opacity = 40);
 border: 1px solid red;
}

CSS properties of the cursor

When highlightmode parameter is set to cursor, highlight are in the main view is replaced with fixed-size cursor artwork, which is controlled with the CSS class selector:

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

It is possible to control the background image and size using CSS.

Applicable CSS properties include:

CSS properties of the overlay

When the overlay parameter is set to 1, the area around the highlight frame or the cursor image is controlled with the CSS class selector:

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay

CSS properties of the tip message

The appearance of the tip message is controlled with the following CSS class selector:

.s7flyoutviewer .s7flyoutzoomview .s7tip

It is possible to configure font style, size, appearance, and vertical offset through CSS. However, horizontal alignment is managed by the viewer logic. Overriding it through CSS using left or right properties is not supported.

The tip message can be localized. See Localization of user interface elements for more information.

Example - to set up semi-transparent tip message with white Arial® 12-px font, 50 pixels offset from the bottom of the main view, padding, and a rounded border:

.s7flyoutviewer .s7flyoutzoomview .s7tip {
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;
opacity: 0.5;
filter: alpha(opacity = 50);
}

Business.Adobe.com resources

Ecommerce Integrations Content Insights Asset Collections Content Management Headless Cms Digital Signage