Zoom view

Main view consists of the zoomable image.

CSS properties of the main viewer area

The appearance of the viewing area is controlled with the following CSS class selector:

.s7basiczoomviewer .s7zoomview

CSS property

Description

background-color

Background color in hexadecimal format of the main view.

cursor

Cursor is displayed over the main view.

Example - to make the main view transparent.

.s7basiczoomviewer .s7zoomview { 
 background-color: transparent; 
}

On desktop systems the component supports the cursortype attribute selector which can be applied to the .s7zoomview class and controls the cursor type based on the component state and user action. The following cursortype values are supported:

Value

Description

default

Displayed when the image is not zoomable because of a small image resolution, or component settings, or both.

zoomin

Displayed when the image can be zoomed in on.

reset

Displayed when the image is at maximum zoom level and can be reset to its initial state.

drag

Displayed when a user pans the image which is in zoomed in state.

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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