Zoom view icon effect zoom-view-icon-effect

The zoom indicator is overlaid on the zoom view area. It is displayed when the image is in a reset state and it also depends on iconeffect parameter.

CSS properties of the main viewer area

The appearance of the viewing area is controlled with the following CSS class selector:

.s7mixedmediaviewer .s7zoomview .s7iconeffect
CSS property
Description
background-image
Zoom indicator artwork.
background-position

Position inside artwork sprite, if CSS sprites are used.

See CSS Sprites.

width
Zoom indicator width.
height
Zoom indicator height.
NOTE
Icon effect supports the media-type attribute selector, which you can use to apply different icon effects on different devices. In particular, media-type='standard' corresponds to desktop systems where mouse input is normally used and media-type='multitouch' corresponds to devices with touch input.

Example - to set up a 100 x 100 pixel zoom indicator with different art for desktop systems and touch devices.

.s7mixedmediaviewer .s7zoomview .s7iconeffect {
 width: 100px;
 height: 100px;
}
.s7mixedmediaviewer .s7zoomview .s7iconeffect[media-type='standard'] {
 background-image:url(images/v2/IconEffect_zoom.png);
}
.s7mixedmediaviewer .s7zoomview .s7iconeffect[media-type='multitouch'] {
 background-image:url(images/v2/IconEffect_pinch.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8