Flyout zoom view 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.
Highlight opacity.
For Internet Explorer 8, use filter:alpha(opacity-…) );
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:
input attribute selector, which can be used to apply different cursor artwork and size for different devices. In particular, input="mouse" corresponds to the desktop systems and input="touch" corresponds to the touch devices.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.
Background opacity of message text.
For Internet Explorer 8, use filter:alpha(opacity-…) )
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);
}