Show Menu
TOPICS×

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.
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); 
}