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

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

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

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.

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

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

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

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

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.

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

Business.Adobe.com resources

Personalized Experiences Responsive Forms Theme Editor Web Content Management Customer Experience Management Digital Rights Management