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:

.s7zoomviewer .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.

.s7zoomviewer .s7zoomview .s7iconeffect { 
 width: 100px; 
 height: 100px; 
} 
.s7zoomviewer .s7zoomview .s7iconeffect[media-type='standard'] { 
 background-image:url(images/v2/IconEffect_zoom.png); 
} 
.s7zoomviewer .s7zoomview .s7iconeffect[media-type='multitouch'] { 
 background-image:url(images/v2/IconEffect_pinch.png); 
}

On this page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now