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:

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

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 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; 
}

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:

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

NOTE

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 .

NOTE

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); 
}

On this page