DocumentationDynamic Media Viewers Reference Guide

Page view page-view

Last update: Sat Nov 06 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Developer
  • User

Main view consists of the catalog image. It can be swiped to get to another page or zoomed.

CSS properties of the main viewer area

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

.s7ecatalogviewer .s7pageview
CSS property
Description
background-color
Background color of the main view in hexadecimal format.
cursor
Cursor that is displayed over the main view.

Example - to make the main view transparent.

.s7ecatalogviewer .s7pageview {
 background-color: transparent;
}

On desktop systems, the component supports the cursortype attribute selector which can be applied to .s7pageview class and controls the type of the cursor based on 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, 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 initial state.
drag
Displayed when user pans the image which is in zoomed in state.
slide
Displayed when the user performs an image swap by doing horizontal swipe or flick.

The page divider that visually separates the left and right pages of the catalog spread is controlled with the following CSS class selector:

.s7ecatalogviewer .s7pageview .s7pagedivider

CSS property
Description
width
The width of page divider. Set to 0 px to hide the divider completely.
background-image
The image that you want to use as the page divider.

Example - to have 40 pixels wide page divider with semi-transparent image.

.s7ecatalogviewer .s7pageview .s7pagedivider {
 width:40px;
 background-image:url(images/sdk/divider.png);
}
NOTE
When the frametransition modifier is set to turn or auto (on desktop systems), the appearance of the page divider is controlled with the pageturnstyle modifier and the .s7pagedivider CSS class is ignored.

It is possible to configure the display of the custom mouse cursors over the main viewer area. This functionality is controlled with the additional attribute selectors applied to .s7ecatalogviewer .s7pageview CSS class:

CSS property
Description
default
Normally an arrow, displays for non-zoomable image.
zoomin
Shows when an image can be zoomed in.
reset
Shows when an image is at maximum zoom and can be reset.
drag
Shows when user performs drag operation on zoomed in image
slide
Shows when user performs image swap using slide gesture

Example - have different mouse cursors for each type of component state.

.s7ecatalogviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8