Icon effect icon-effect
The zoom indicator is overlaid on the main 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:
.s7ecatalogsearchviewer .s7pageview .s7iconeffect
CSS property
Description
background-image
Zoom indicator artwork.
background-position
Position inside artwork sprite, if CSS sprites are used.
See also CSS Sprites.
width
Zoom indicator width in pixels.
height
Zoom indicator height in pixels.
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.
.s7ecatalogsearchviewer .s7pageview .s7iconeffect {
width: 100px;
height: 100px;
}
.s7ecatalogsearchviewer .s7pageview .s7iconeffect[media-type='standard'] {
background-image:url(images/v2/IconEffect_zoom.png);
}
.s7ecatalogsearchviewer .s7pageview .s7iconeffect[media-type='multitouch'] {
background-image:url(images/v2/IconEffect_pinch.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8