Zoom view zoom-view

In continuous zoom mode, main view consists of the zoomable image when the current asset is a single image.

CSS properties of the main viewer area

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

.s7mixedmediaviewer .s7zoomview
CSS property
Background color in hexadecimal format of the main view.
Cursor displayed over the main view.

Example - to make the zoom view transparent.

.s7mixedmediaviewer .s7zoomview {
 background-color: transparent;

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

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

  • reset

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

  • drag

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

  • slide

    Displayed when the user performs image swap by doing a horizontal swipe or flick.