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);
}
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;
}