Amostras principais

As Amostras principais 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.

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

.s7mixedmediaviewer .s7swatches

Propriedades de CSS das amostras

altura

A altura das amostras.

bottom

O deslocamento das amostras verticais em relação ao container do visualizador.

Exemplo - para configurar amostras com uma altura de 100 pixels.

.s7mixedmediviewer .s7swatches { 
 height: 100px;  
}

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

.s7mixedmediaviewer .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.

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

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

.s7mixedmediaviewer .s7swatches .s7thumb

Propriedade CSS

Descrição

width

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.

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

O tipo de ativo é exibido como um ícone sobreposto sobre a imagem em miniatura e é controlado com o seguinte seletor de classe CSS:

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay

Propriedade CSS

Descrição

largura

Largura da sobreposição do ícone.

altura

Altura da sobreposição do ícone.

A sobreposição suporta o seletor de atributos type com os seguintes valores possíveis: image (para imagens únicas), swatchset (para conjuntos de amostras), spinset (para conjuntos de rotação) e video (para vídeos únicos ou conjuntos de vídeo adaptáveis).

Exemplo - para configurar sobreposições de ícone para conjuntos de rotação, conjuntos de amostras e vídeos:

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="swatchset"] { 
 background-image: url(images/v2/ThumbOverlaySwatchSet.png);  
} 
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="spinset"] { 
 background-image: url(images/v2/ThumbOverlaySpinSet.png);  
} 
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="video"] { 
 background-image: url(images/v2/ThumbOverlayVideo.png);  
}

A aparência dos botões de rolagem à esquerda e à direita são controlados com os seguintes seletores de classe CSS:

.s7mixedmediaviewer .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .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 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 para obter mais informações.

Exemplo - para configurar botões de rolagem com 56 x 56 pixels e arte-final diferente para cada estado.

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