Amostras

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ó ficam visíveis na área de trabalho se todas as miniaturas não puderem se ajustar à largura do container. Em dispositivos móveis, ou se as miniaturas puderem se ajustar à largura do container, os botões de rolagem não serão exibidos.

.s7zoomviewer .s7swatches

Propriedades de CSS da área do visualizador principal

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

.s7zoomviewer .s7zoomresetbutton

Propriedade CSS

Descrição

width

Largura das amostras.

altura

Altura das amostras.

bottom

As amostras verticais são deslocadas em relação ao container do visualizador.

Exemplo - para configurar amostras para 460 x 100 pixels.

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

O espaçamento entre as miniaturas da 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 das miniaturas é igual à soma das margens esquerda e direita definidas para .s7thumbcell .

Exemplo

Para definir o espaçamento como dez pixels, tanto na vertical quanto na horizontal.

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

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

.s7zoomviewer .s7swatches .s7thumb

Propriedade CSS

Descrição

largura

Largura da miniatura.

altura

Altura da miniatura.

fronteira

Borda da miniatura.

OBSERVAÇÃO

A miniatura suporta o seletor de atributos state, que pode ser usado para aplicar diferentes capas a diferentes estados de miniaturas. Especificamente, state="selected" corresponde à miniatura da imagem atualmente exibida na visualizaçã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, uma borda padrão cinza claro e uma borda cinza escura selecionada.

.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 à esquerda e à direita são controlados 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 superior, esquerda, inferior e direita. Em vez disso, a lógica do visualizador os posiciona automaticamente.

Propriedade CSS

Descrição

largura

Largura do botão de rolagem.

altura

Altura do botão de rolagem.

background-image

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

posição de fundo

Posição dentro da sprite de arte, se os sprites CSS forem usados.

Consulte CSS Sprites .

OBSERVAÇÃO

Este botão suporta o seletor de atributos state, que pode ser usado para aplicar diferentes capas a diferentes estados de botão: up, down, over e disabled.

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

Exemplo - para configurar botões de rolagem com 56 x 56 pixels e arte-final 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

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free