Thumbnails consist of a grid of thumbnail images with an optional scroll bar on the right side to allow vertical scrolling.
Thumbnails are toggled by clicking the thumbnail button in the main control bar. When thumbnails are active, they display in modal mode overlaid on top of the viewer user interface. The viewer logic automatically resizes the thumbnails container to the entire viewer area.
The appearance of the thumbnails container is controlled with the following CSS class selector:
.s7ecatalogsearchviewer .s7thumbnailgridview
CSS property |
Description |
---|---|
top |
The vertical offset of the thumbnails container from the top of the viewer. |
margin-top |
The top margin. |
margin-left |
The left margin. |
margin-right |
The right margin. |
margin-bottom |
The bottom margin. |
background-color |
The background color of the thumbnails area. |
Example - to set up thumbnails to have 32 pixels offset from the top, 5 pixels margins on the left and right, and 8 pixels margin on the bottom, with 0xDDDDDD
background.
.s7ecatalogsearchviewer .s7thumbnailgridview {
top: 32px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 8px;
background-color: rgb(221, 221, 221);
}
The spacing between thumbnails is controlled with the following CSS class selector:
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell
CSS property |
Description |
---|---|
margin |
The size of the horizontal and vertical margin around each thumbnail. Actual horizontal thumbnail spacing is equal to the sum of the left and right margin that is set for .s7thumbcell . Vertical thumbnail spacing equals to the sum of the top and bottom margin. |
Example - to set a 10 pixel space both vertically and horizontally.
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell {
margin: 5px;
}
The appearance of individual thumbnail is controlled with the following CSS class selector:
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb
CSS property |
Description |
---|---|
width |
The width of the thumbnail. |
height |
The height of the thumbnail. |
border |
The border of the thumbnail. |
background-color |
The background color of the thumbnail. |
On touch devices, when rotated to portrait mode, the viewer may size thumbnails to half of what is configured in case it decides to split the catalog spread into individual pages.
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 120 x 85 pixels, have a white background, a light gray standard border, and a dark grey selected border.
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb {
width:120px;
height:85px;
background-color: rgb(255, 255, 255);
border: solid 1px #999999;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb[state="selected"]{
border: solid 2px #666666;
}
The appearance of the thumbnail label is controlled with the following CSS class selector:
.s7ecatalogsearchviewer .s7thumbnailgridview .s7label
CSS property |
Description |
---|---|
font-family |
Font name. |
font-size |
Font size. |
Example - to set up labels to use 14 pixels Helvetica® font.
.s7ecatalogsearchviewer .s7thumbnailgridview .s7label {
font-family: Helvetica,sans-serif;
font-size: 12px;
}
If there are more thumbnails than can fit vertically into the view, thumbnails renders the vertical scroll bar on the right side. The appearance of scroll bar area is controlled with the following CSS class selector:
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar
CSS property |
Description |
---|---|
width |
The width of the scroll bar. |
top |
The vertical scroll bar offset from the top of the thumbnails area. |
bottom |
The vertical scroll bar offset from the bottom of the thumbnails area. |
right |
The horizontal scroll bar offset from the right edge of the thumbnails area. |
Example - to set up a scroll bar that is 28 pixels wide and has an 8 pixel margin from the top, right, and bottom of the thumbnails area.
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar {
top:8px;
bottom:8px;
right:8px;
width:28px;
}
The scroll bar track is the area between the top and bottom scroll buttons. The component automatically sets the position and height of the track. The track is controlled with the following CSS class selector:
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack
CSS property |
Description |
---|---|
width |
The width of the scroll bar track. |
background-color |
The background color of the scroll bar track. |
Example - to set up a scroll bar track that is 28 pixels wide and has a semi-transparent gray background.
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
width:28px;
background-color:rgba(102, 102, 102, 0.5);
}
The scroll bar thumb moves vertically within the scroll track area. Its vertical position is fully controlled by the component logic, however, thumb height does not dynamically change depending on the amount of content. The thumb height and other aspects are controlled with the following CSS class selector:
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb
CSS property |
Description |
---|---|
width |
The width of the scroll bar thumb. |
height |
The height of the scroll bar thumbnail. |
padding-top |
The vertical padding between the top of the scroll bar track. |
padding-bottom |
The vertical padding between the bottom of the scroll bar track. |
background-image |
The image that is displayed for a given thumb state. |
background-position |
Position inside artwork sprite, if CSS sprites are used. See also CSS Sprites . |
Thumb supports the state
attribute selector, which can be used to apply different skins to the thumb states up
, down
, over
, and disabled
.
Example - to set up a scroll bar thumb that is 28 x 45 pixels, has 10 pixel margins on the top and bottom, and have different artwork for each state.
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
width:28px;
background-repeat:no-repeat;
background-position:center;
height:45px;
padding-top:10px;
padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
The appearance of the top and bottom scroll buttons is controlled with following CSS class selectors:
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .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 property |
Description |
---|---|
width |
The width of the button. |
height |
The height of the button. |
background-image |
The image that is displayed for a given thumb state. |
background-position |
Position inside artwork sprite, if CSS sprites are used. See also CSS Sprites . |
These buttons support the state
attribute selector, which can be used to apply different skins to the different button states up
, down
, over
, and disabled
.
The button tool tip can be localized. See Localization of user interface elements for more information.
Example - to set up scroll buttons which are 28 x 32 pixels and have different artwork for each state.
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}