The interactive swatches panel appears next to the video content if interactive data was passed to the viewer in configuration. It consists of a banner at the top that renders text such as “Click to View”, a column of one or more interactive swatches and two scroll buttons (available only on desktop systems).
On desktop systems and on touch devices, in landscape orientation, interactive swatches are rendered vertically to the right of the video content. On touch devices in portrait orientation they appear at the bottom of the viewer, as a horizontal row of swatches.
The following CSS class selector controls the location and orientation of the interactive swatches panel:
.s7interactivevideoviewer .s7interactiveswatches
width |
Width of the interactive swatches panel |
height |
Height of the interactive swatches panel. |
top |
Top position of he interactive swatches panel. |
bottom |
Bottom position of the interactive swatches panel. |
left |
Left position of the interactive swatches panel. |
right |
Right position of the interactive swatches panel. |
The run-time location and orientation of the interactive swatches panel is defined by a combination of the above CSS properties as follows:
It is possible to use CSS markers in conjunction with this styling to achieve adaptive placement of the interactive swatches panel.
To set up an interactive swatches panel to render horizontally at the bottom of the viewer on touch devices in landscape orientation and to show vertically to the right of the video content in all other cases:
.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches,
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches {
width:120px;
height:auto;
right:0px;
top:0px;
left:auto;
bottom:auto;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches {
width:auto;
height:136px;
right:auto;
top:auto;
left:0px;
bottom:0px;
}
The size and position of the banner is managed by the interactive swatches component based on other styling applied with CSS and cannot be set explicitly.
The following CSS class selector controls the appearance of the banner panel:
.s7interactivevideoviewer .s7interactiveswatches .s7banner
background-color |
Background color of the banner panel. |
color |
Text color inside the banner panel. |
border |
Border around the banner panel. |
font-weight |
The font weight to use for the text inside the banner panel. |
font-size |
The font size to use for the text inside the banner panel. |
font-family |
The font family to use for the text inside the banner panel. |
font-align |
The font alignment to use for the text inside the banner panel. |
The banner tool tip can be localized. See Localization of user interface elements for more information.
To set up a banner with dark gray background, lighter gray two pixel border and the white text centered horizontally:
.s7interactivevideoviewer .s7interactiveswatches .s7banner {
background-color: #222222;
border-bottom: 2px solid #444444;
color: #ffffff;
text-align: center;
}
The following CSS class selector controls the appearance of the swatches:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches
background-color |
Background color of the swatches area. |
To set up swatches area with dark gray background:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
background-color: #222222;
}
The following CSS class selector controls the spacing between swatch thumbnails:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell
margin |
The size of the horizontal and vertical margin around each thumbnail. The actual thumbnail spacing equals to the sum of the left and right margin set for .s7thumbcell . |
To set up vertical spacing to be 10 pixels:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell {
margin: 5px;
}
The following CSS class selector controls the appearance of individual thumbnails:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb
width |
Width of the thumbnail. |
height |
Height of the thumbnail. |
border |
Border of the thumbnail. |
Thumbnail supports the state
attribute selector, which you can use to apply different skins to different thumbnail states. In particular, state="selected"
corresponds to the thumbnail for the currently selected image; state="default"
corresponds to the rest of thumbnails; state="over"
is used on mouse hover.
To set up thumbnails that are 100 x 75 pixels:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
width:100px;
height:75px;
}
The following CSS class selector controls the appearance of the thumbnail label:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label
color |
Text color. |
border |
Label border. |
text-align |
Horizontal text alignment. |
font-family |
Font name. |
To set up labels to use left-aligned, white, 12 pixels, in Helvetica font, and a bottom border:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label {
border-bottom: 1px solid #e9e9e9;
text-align: left;
color: #ffffff;
font-family: Helvetica,sans-serif;
font-size: 12px;
}
The following CSS class selector controls the appearance of the up and down scroll buttons:
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton
.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton
It is not possible to position the scroll buttons using CSS top
, left
, bottom
, and right
properties; instead, the viewer logic positions them automatically.
width |
Width of the scroll button. |
height |
Height of the scroll button. |
background-image |
The image that is displayed for a given button state. |
background-position |
The position inside the artwork sprite, if CSS sprites are used. See also CSS Sprites . |
This button supports the state
attribute selector, which you can use to apply different skins to the button states: " up
", " down
", " over
", and " disabled
".
The button tool tips can be localized. See Localization of user interface elements for more information.
To set up scroll up button that is 60 x 36 pixels, have different artwork for each state and takes that artwork from the component’s sprite image:
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton {
background-size: 120px;
width: 60px;
height: 36px;
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] {
background-image: url(images/v2/InteractiveSwatches_light_sprite.png);
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }