Show Menu
TOPICS×

Thumbnails

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:
.s7ecatalogviewer .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.
.s7ecatalogviewer .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:
.s7ecatalogviewer .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.
.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell { 
 margin: 5px; 
}

The appearance of individual thumbnail is controlled with the following CSS class selector:
.s7ecatalogviewer .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.
.s7ecatalogviewer .s7thumbnailgridview .s7thumb { 
 width:120px; 
 height:85px; 
 background-color: rgb(255, 255, 255); 
 border: solid 1px #999999; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7thumb[state="selected"]{ 
 border: solid 2px #666666; 
}

The appearance of the thumbnail label is controlled with the following CSS class selector:
.s7ecatalogviewer .s7thumbnailgridview .s7label
CSS property
Description
font-family
Font name.
font-size
Font size.
Example - to set up labels to use 14 pixels Helvetica font.
.s7ecatalogviewer .s7thumbnailgridview .s7label { 
 font-family: Helvetica,sans-serif; 
 font-size: 12px; 
}

In case 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:
.s7ecatalogviewer .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.
.s7ecatalogviewer .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:
.s7ecatalogviewer .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.
.s7ecatalogviewer .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:
.s7ecatalogviewer .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.
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb { 
 width:28px; 
 background-repeat:no-repeat; 
 background-position:center; 
 height:45px; 
 padding-top:10px; 
 padding-bottom:10px; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png); 
} 
.s7ecatalogviewer .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:
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton
.s7ecatalogviewer .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.
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png); 
} 
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] { 
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png); 
}