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

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

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

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

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.

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