Page view

Last update: 2021-12-10
  • 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:

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

.s7ecatalogsearchviewer .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:

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

.s7ecatalogsearchviewer .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 ability is controlled with the additional attribute selectors applied to .s7ecatalogsearchviewer .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.

.s7ecatalogsearchviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}
Previous page
Next page

On this page