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

Propriedade CSS
Descrição
top
O deslocamento vertical do contêiner de miniaturas da parte superior do visualizador.
margem superior
A margem superior.
margem esquerda
A margem esquerda.
margem direita
A margem direita.
margem inferior
A margem inferior.
cor de fundo
A cor do plano de fundo da área de miniaturas.

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

Propriedade CSS
Descrição
margem
O tamanho da margem horizontal e vertical ao redor de cada miniatura. O espaçamento horizontal real entre miniaturas é igual à soma das margens esquerda e direita definidas para .s7thumbcell . Espaçamento vertical entre miniaturas igual à soma das margens superior e inferior.

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

Propriedade CSS
Descrição
largura
A largura da miniatura.
altura
A altura da miniatura.
borda
A borda da miniatura.
cor de fundo
A cor do plano de fundo da miniatura.

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.

NOTE
A miniatura dá suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Especificamente, state="selected" corresponde à miniatura da imagem que está sendo exibida no momento na exibição principal, state="default" corresponde ao restante das miniaturas e state="over" é usado ao passar o mouse.

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

Propriedade CSS
Descrição
Família de fontes
Nome da fonte.
tamanho da fonte
Tamanho da fonte.

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

Propriedade CSS
Descrição
largura
A largura da barra de rolagem.
top
O deslocamento da barra de rolagem vertical a partir da parte superior da área de miniaturas.
inferior
O deslocamento da barra de rolagem vertical na parte inferior da área de miniaturas.
direita
O deslocamento da barra de rolagem horizontal a partir da borda direita da área de miniaturas.

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

Propriedade CSS
Descrição
largura
A largura da faixa da barra de rolagem.
cor de fundo
A cor do plano de fundo da faixa da barra de rolagem.

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

Propriedade CSS
Descrição
largura
A largura da miniatura da barra de rolamento.
altura
A altura da miniatura da barra de rolagem.
padding-top
O preenchimento vertical entre a parte superior da faixa da barra de rolagem.
preenchimento inferior
O preenchimento vertical entre a parte inferior da faixa da barra de rolagem.
imagem de fundo
A imagem exibida para um determinado estado de miniatura.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS.

NOTE
A miniatura dá suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes aos estados de miniatura up, down, over e disabled.

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.

Propriedade CSS
Descrição
largura
A largura do botão.
altura
A altura do botão.
imagem de fundo
A imagem exibida para um determinado estado de miniatura.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS.

NOTE
Estes botões oferecem suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes aos diferentes estados de botão up, down, over e disabled.

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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8