Interactive swatches interactive-swatches

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

CSS properties of the interactive swatches css-properties-of-the-interactive-swatches

width
Width of the interactive swatches panel
height
Height of the interactive swatches panel.
top
Top position of the 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:

  • To render interactive swatches horizontally at the bottom of the viewer, set the height to an absolute pixel value; left and bottom to 0px; width, right, and top to auto.
  • To render interactive swatches vertically to the right of the video content, set the width to an absolute pixel; right and top to 0px; height, left and bottom to auto.

It is possible to use CSS markers with this styling to achieve adaptive placement of the interactive swatches panel.

Example example

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 it 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

CSS properties of the banner panel css-properties-of-the-banner-panel

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.

Example section-e8caea0a303c425a8a637c2a47c06355

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

CSS properties of the swatches area css-properties-of-the-swatches-area

background-color
Background color of the swatches area.

Example section-9cadd62a09fd44a280f55ff42437e416

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

CSS properties of the swatches thumbnail spacing css-properties-of-the-swatches-thumbnail-spacing

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 .

Example section-39fb270b7e494a9d99e6e8f6890ec53c

To set up vertical spacing to be ten pixels:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell {
 margin: 5px;
}

The following CSS class selector controls the appearance of individual thumbnails:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

CSS properties of the appearance of individual thumbnails css-properties-of-the-appearance-of-individual-thumbnails

width
Width of the thumbnail.
height
Height of the thumbnail.
border
Border of the thumbnail.
NOTE
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.

Example section-69fec189ffaa440b97b6b846c320b75b

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

CSS properties of the appearance of the thumbnail label css-properties-of-the-appearance-of-the-thumbnail-label

color
Text color.
border
Label border.
text-align
Horizontal text alignment.
font-family
Font name.

Example section-eb141eb6c1154183baa69796edb90536

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.

CSS properties of the appearance of the up and down scroll buttons css-properties-of-the-appearance-of-the-up-and-down-scroll-buttons

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.

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

Example section-e6ce4fa084b84288bc7583342b2c510c

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; }
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8