Main swatches main-swatches

Main Swatches consist of a row of thumbnail images with optional scroll buttons on the left and right side. Scroll buttons are only visible on the desktop if all thumbnails cannot fit into the width of the container. On mobile devices, or if thumbnails can fit into the container width, scroll buttons are not shown.

The appearance of the swatches container is controlled with the CSS class selector:

.s7mixedmediaviewer .s7swatches

CSS properties of the swatches

height
The height of the swatches.
bottom
The vertical swatches offset relative to the viewer container.

Example - to set up swatches with a height of 100 pixels.

.s7mixedmediviewer .s7swatches {
 height: 100px;
}

The spacing between the swatch thumbnails is controlled with the following CSS class selector:

.s7mixedmediaviewer .s7swatches .s7thumbcell

CSS property
Description
margin
The size of horizontal and vertical margin around each thumbnail. Actual thumbnail spacing equals to the sum of left and right margin set for .s7thumbcell .

Example

To set spacing to ten pixels both vertically and horizontally.

.s7mixedmediaviewer .s7swatches .s7thumbcell {
 margin: 5px;
}

The appearance of the individual thumbnail is controlled with the following CSS class selector:

.s7mixedmediaviewer .s7swatches .s7thumb

CSS property
Description
width
Width of the thumbnail.
height
Height of the thumbnail.
border
Border of the thumbnail.
NOTE
Thumbnail supports the state attribute selector, which can be used to apply different skins to different thumbnail states. In particular, state="selected" corresponds to the thumbnail for the image that is currently displayed in the main view, state="default" corresponds to the rest of thumbnails, and state="over" is used on mouse hover.

Example - to set up thumbnails that are 56 x 56 pixels, have a light gray default border, and a dark gray selected border.

.s7mixedmediaviewer .s7swatches .s7thumb {
 width: 56px;
 height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7thumb[state="default"] {
 border: 1px solid #dddddd;
}
.s7mixedviewer .s7swatches .s7thumb[state="selected"] {
 border: 1px solid #666666;
}

The type of the asset is displayed as an icon overlaid on top of thumbnail image and is controlled with the following CSS class selector:

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay

CSS property
Description
width
Width of the icon overlay.
height
Height of the icon overlay.

The overlay supports the type attribute selector with the following possible values: image (for single images), swatchset (for swatch sets), spinset (for spin sets), and video (for single videos or adaptive video sets).

Example - to set up icon overlays for spin sets, swatch sets, and videos:

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="swatchset"] {
 background-image: url(images/v2/ThumbOverlaySwatchSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="spinset"] {
 background-image: url(images/v2/ThumbOverlaySpinSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="video"] {
 background-image: url(images/v2/ThumbOverlayVideo.png);
}

The appearance of the left and right scroll buttons are controlled with the following CSS class selectors:

.s7mixedmediaviewer .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7swatches .s7scrollrightbutton

It is not possible to position scroll buttons using CSS top, left, bottom, and right properties. Instead, the viewer logic positions them automatically.

CSS property
Description
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

Position inside artwork sprite, if CSS sprites are used.

See CSS Sprites.

NOTE
This button supports the state attribute selector, which can be used to apply different skins to different button states: up, down, over, and disabled.

The button tool tips can be localized. See Localization of user interface elements for more information.

Example - to set up scroll buttons that are 56 x 56 pixels and have different artwork for each state.

.s7mixedmediaviewer .s7swatches .s7scrollleftbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="over"]{
 background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="down"]{
 background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
 background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="over"]{
 background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="down"]{
 background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
 background-image:url(images/v2/ScrollRightButton_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8