O indicador de zoom está sobreposto na área da visualização principal. Ela é exibida quando a imagem está em um estado de redefinição e também depende do parâmetro de efeito de ícone.
Propriedades de CSS da área do visualizador principal
A aparência da área de visualização é controlada com o seguinte seletor de classe CSS:
.s7ecatalogsearchviewer .s7pageview .s7iconeffect
Propriedade CSS |
Descrição |
---|---|
background-image |
Arte do indicador de zoom. |
posição de fundo |
Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte também CSS Sprites . |
width |
Largura do indicador de zoom em pixels. |
altura |
Altura do indicador de zoom em pixels. |
O efeito de ícone suporta o seletor de atributos media-type
, que você pode usar para aplicar efeitos de ícones diferentes em dispositivos diferentes. Em particular, media-type='standard'
corresponde a sistemas de desktop onde a entrada do mouse é normalmente usada e media-type='multitouch'
corresponde a dispositivos com entrada de toque.
Exemplo - para configurar um indicador de zoom de 100 x 100 pixels com arte diferente para sistemas de desktop e dispositivos de toque.
.s7ecatalogsearchviewer .s7pageview .s7iconeffect {
width: 100px;
height: 100px;
}
.s7ecatalogsearchviewer .s7pageview .s7iconeffect[media-type='standard'] {
background-image:url(images/v2/IconEffect_zoom.png);
}
.s7ecatalogsearchviewer .s7pageview .s7iconeffect[media-type='multitouch'] {
background-image:url(images/v2/IconEffect_pinch.png);
}