Show Menu
TOPICS×

Flyout zoom view

The main view consists of the static image, the zoomed image shown in the flyout view, the highlight navigation area displayed over the static image and the tip message shown on top of 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

CSS property
Description
background-color
The background color of the main view.
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

CSS property
Description
left
The horizontal position of the flyout view, relative to top left corner of main view.
top
The vertical position of the flyout view, relative to top left corner of main view.
width
The width of the flyout view.
height
The height of the flyout view.
border
The border of the flyout view.
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.
CSS property
Description
background-color
The color of the highlight.
opacity
Highlight opacity.
For Internet Explorer 8, use filter:alpha(opacity-…) );
border
The border highlight.
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 property
Description
background-image
Cursor artwork.
width
Cursor width.
height
Cursor height.
Cursor supports the 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 property
Description
background-color
Overlay color.
opacity
Overlay opacity.
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.
CSS property
Description
bottom
Offset from the bottom of the main view.
color
Text color.
font-family
Font name.
font-size
Font size.
padding
Padding around the message text.
background-color
Background fill color of message text.
border-radius
Background border radius of message text.
opacity
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 12px 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); 
}