Amostras

Última atualização em 2023-11-03
  • Tópicos
  • Dynamic Media Classic
    Exibir mais informações sobre este tópico
  • Viewers
    Exibir mais informações sobre este tópico
  • SDK/API
    Exibir mais informações sobre este tópico
  • Zoom
    Exibir mais informações sobre este tópico
  • Criado para:
  • Developer
    User

As amostras consistem em uma linha de imagens em miniatura com botões de rolagem opcionais no lado esquerdo e direito. Os botões de rolagem só estarão visíveis na área de trabalho se todas as miniaturas não couberem na largura do container. Em dispositivos móveis, ou se as miniaturas couberem na largura do contêiner, os botões de rolagem não serão exibidos.

.s7zoomviewer .s7swatches

Propriedades CSS da área do visualizador principal

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

.s7zoomviewer .s7zoomresetbutton

Propriedade CSS

Descrição

largura

Largura das amostras.

altura

Altura das amostras.

bottom

Deslocamento vertical das amostras em relação ao contêiner do visualizador.

Exemplo - para configurar amostras para 460 x 100 pixels.

.s7zoomviewer .s7swatches {
 width: 460px;
 height: 100px;
}

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

.s7zoomviewer .s7swatches .s7thumbcell

Propriedade CSS

Descrição

margem

O tamanho da margem horizontal e vertical ao redor de cada miniatura. O espaçamento real entre miniaturas é igual à soma das margens esquerda e direita definidas para .s7thumbcell .

Exemplo

Para definir o espaçamento como dez pixels, vertical e horizontalmente.

.s7zoomviewer .s7swatches .s7thumbcell {
 margin: 5px;
}

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

.s7zoomviewer .s7swatches .s7thumb

Propriedade CSS

Descrição

largura

Largura da miniatura.

altura

Altura da miniatura.

borda

Borda da miniatura.

OBSERVAÇÃO

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

Exemplo - para configurar miniaturas com 56 x 56 pixels, tem uma borda padrão cinza-claro e uma borda selecionada cinza-escuro.

.s7zoomviewer .s7swatches .s7thumb {
 width: 56px;
 height: 56px;
}
.s7zoomviewer .s7swatches .s7thumb[state="default"] {
 border: 1px solid #dddddd;
}
.s7zoomviewer .s7swatches .s7thumb[state="selected"] {
 border: 1px solid #666666;
}

A aparência dos botões de rolagem para a esquerda e para a direita é controlada com os seguintes seletores de classe CSS:

.s7zoomviewer .s7swatches .s7scrollleftbutton

.s7zoomviewer .s7swatches .s7scrollrightbutton

Não é possível posicionar 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

Largura do botão de rolagem.

altura

Altura do botão de rolagem.

background-image

A imagem exibida para um determinado estado de botão.

background-position

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

Consulte Sprites CSS .

OBSERVAÇÃO

Esse botão oferece suporte ao state seletor de atributo, que pode ser usado para aplicar capas diferentes a estados de botão diferentes: up, down, over, e disabled.

As dicas de ferramentas do botão podem ser localizadas. Consulte Localização dos elementos da interface do usuário.

Exemplo - para configurar botões de rolagem com 56 x 56 pixels e que tenham um trabalho artístico diferente para cada estado.

.s7zoomviewer .s7swatches .s7scrollleftbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="over"]{
 background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="down"]{
 background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
 background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="over"]{
 background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="down"]{
 background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
 background-image:url(images/v2/ScrollRightButton_disabled.png);
}

Nesta página