Swatches swatches
Swatches consist of a row of thumbnail images with optional scroll buttons on the left- and right-hand side. Scroll buttons are only visible on the desktop if all thumbnails cannot fit into the container width. On mobile devices, or if thumbnails can fit into the container width, the scroll buttons are not shown.
.s7zoomviewer .s7swatches
CSS properties of the main viewer area
The appearance of the swatches container is controlled with the following CSS class selector:
.s7zoomviewer .s7zoomresetbutton
Example - to set up swatches to 460 x 100 pixels.
.s7zoomviewer .s7swatches {
width: 460px;
height: 100px;
}
The spacing between the swatch thumbnails is controlled with the following CSS class selector:
.s7zoomviewer .s7swatches .s7thumbcell
Example
To set spacing to ten pixels both vertically and horizontally.
.s7zoomviewer .s7swatches .s7thumbcell {
margin: 5px;
}
The appearance of the individual thumbnail is controlled with the following CSS class selector:
.s7zoomviewer .s7swatches .s7thumb
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.
.s7zoomviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7zoomviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
The appearance of the left and right scroll buttons are controlled with the following CSS class selectors:
.s7zoomviewer .s7swatches .s7scrollleftbutton
.s7zoomviewer .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.
Position inside artwork sprite, if CSS sprites are used.
See CSS Sprites.
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.
Example - to set up scroll buttons that are 56 x 56 pixels and have different artwork for each state.
.s7zoomviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}