Icon effect
Last update: December 10, 2021
CREATED FOR:
- Developer
- User
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. |
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