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