Miniaturas thumbnails

As miniaturas consistem em uma grade de imagens em miniatura com uma barra de rolagem opcional no lado direito para permitir a rolagem vertical.

As miniaturas são alternadas clicando no botão de miniatura na barra de controle principal. Quando as miniaturas estão ativas, elas são exibidas no modo modal, sobrepostas na parte superior da interface do usuário do visualizador. A lógica do visualizador redimensiona automaticamente o contêiner de miniaturas para toda a área do visualizador.

A aparência do contêiner de miniaturas é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview

Exemplo - configurar miniaturas para ter 32 pixels deslocados da parte superior, 5 pixels à esquerda e à direita e 8 pixels na margem inferior, com 0xDDDDDD plano de fundo.

.s7ecatalogsearchviewer .s7thumbnailgridview {
 top: 32px;
 margin-left: 5px;
 margin-right: 5px;
 margin-bottom: 8px;
 background-color: rgb(221, 221, 221);
}

O espaçamento entre as miniaturas é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

Exemplo - para definir um espaço de 10 pixels vertical e horizontalmente.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell {
 margin: 5px;
}

A aparência da miniatura individual é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

Em dispositivos de toque, quando girado para o modo retrato, o visualizador pode dimensionar miniaturas para metade do que está configurado, caso decida dividir a visualização do catálogo em páginas individuais.

Exemplo - para configurar miniaturas com 120 x 85 pixels, tenha um plano de fundo branco, uma borda padrão cinza-claro e uma borda selecionada cinza-escuro.

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

A aparência do rótulo da miniatura é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

Exemplo - para configurar rótulos para usar a fonte Helvetica® de 14 pixels.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 12px;
}

Se houver mais miniaturas que possam caber verticalmente na exibição, elas renderizarão a barra de rolagem vertical no lado direito. A aparência da área da barra de rolagem é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

Exemplo - para configurar uma barra de rolagem com 28 pixels de largura e uma margem de 8 pixels na parte superior, direita e inferior da área de miniaturas.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar {
 top:8px;
 bottom:8px;
 right:8px;
 width:28px;
}

A faixa da barra de rolagem é a área entre os botões de rolagem superior e inferior. O componente define automaticamente a posição e a altura da faixa. A faixa é controlada com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Exemplo - para configurar uma faixa de barra de rolagem com 28 pixels de largura e um plano de fundo cinza semitransparente.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

A miniatura da barra de rolagem se move verticalmente dentro da área de rolagem da trilha. Sua posição vertical é totalmente controlada pela lógica do componente. No entanto, a altura da miniatura não muda dinamicamente, dependendo da quantidade de conteúdo. A altura da miniatura e outros aspectos são controlados com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Exemplo - para configurar uma miniatura de barra de rolagem com 28 x 45 pixels, tem margens de 10 pixels na parte superior e inferior e tem arte-final diferente para cada estado.

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

A aparência dos botões de rolagem superior e inferior é controlada com os seguintes seletores de classe CSS:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Não é possível posicionar os botões de rolagem usando as propriedades CSS top, left, bottom e right. Em vez disso, a lógica do visualizador as posiciona automaticamente.

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar botões de rolagem com 28 x 32 pixels e diferentes trabalhos artísticos para cada estado.

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