Exibição de zoom de imagem suspensa

Última atualização em 2023-05-20
  • 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
  • Flyout
    Exibir mais informações sobre este tópico
  • Criado para:
  • Developer
    User

A visualização principal consiste na imagem estática e na imagem com zoom mostrada na visualização da imagem suspensa. Também consiste na área de navegação de realce exibida sobre a imagem estática e na mensagem de dica mostrada na parte superior da imagem estática.

Se as dimensões da imagem que está sendo visualizada não corresponderem às dimensões da exibição de zoom da imagem suspensa, o conteúdo da imagem será centralizado na área de exibição do retângulo da exibição de zoom da imagem suspensa.

Propriedades CSS da exibição principal

A aparência da visualização principal é controlada com o seguinte seletor de classe CSS:

.s7flyoutviewer .s7flyoutzoomview

Propriedade CSS

Descrição

background-color

A cor do plano de fundo da janela principal.

Exemplo - para tornar a exibição principal transparente:

.s7flyoutviewer .s7flyoutzoomview {
 background-color: transparent;
}

Propriedades CSS da exibição da imagem suspensa

A aparência da exibição de imagem suspensa é controlada com o seguinte seletor de classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom

Propriedade CSS

Descrição

left

A posição horizontal da exibição da imagem suspensa, relativa ao canto superior esquerdo da exibição principal.

top

A posição vertical da exibição da imagem suspensa, relativa ao canto superior esquerdo da exibição principal.

largura

A largura da exibição da imagem suspensa.

altura

A altura da exibição da imagem suspensa.

borda

A borda da exibição da imagem suspensa.

Exemplo - para configurar uma exibição de imagem suspensa para 600 x 400 pixels, aparecendo com 100 pixels deslocados à direita da exibição principal de 512 x 288 mostrada no exemplo anterior:

.s7flyoutviewer .s7flyoutzoomview .s7flyoutzoom {
 left: 612px;
 top: 0px;
 width: 600px;
 height: 400px;
}

Propriedades CSS do destaque na exibição principal

A aparência do destaque na exibição principal é controlada com o seguinte seletor de classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7highlight

É possível controlar o plano de fundo, a borda, a transparência e atributos semelhantes usando CSS. No entanto, o tamanho e a posição do elemento DOM de destaque são gerenciados pela lógica do visualizador. Não há suporte para a substituição por meio do CSS.

Propriedade CSS

Descrição

background-color

A cor do destaque.

opacidade

Realçar opacidade.

Para o Internet Explorer 8, use filtro:alfa(opacidade-...) );

borda

O destaque da borda.

Exemplo - para configurar um realce verde com 40% de transparência e uma borda vermelha de um pixel:

.s7flyoutviewer .s7flyoutzoomview .s7highlight {
 background-color: green;
 opacity: 0.4;
 filter: alpha(opacity = 40);
 border: 1px solid red;
}

Propriedades CSS do cursor

Quando highlightmode está definido como cursor, os realces estão na exibição principal e são substituídos por um trabalho artístico de cursor de tamanho fixo, que é controlado com o seletor de classe CSS:

 .s7flyoutviewer .s7flyoutzoomview
.s7cursor

É possível controlar a imagem de fundo e o tamanho usando CSS.

As propriedades de CSS aplicáveis incluem:

Propriedade CSS

Descrição

background-image

Trabalho artístico de cursor.

largura

Largura do cursor.

altura

Altura do cursor.

OBSERVAÇÃO

O cursor suporta o input seletor de atributo, que pode ser usado para aplicar arte-final e tamanho de cursor diferentes para dispositivos diferentes. Em especial, input="mouse" corresponde aos sistemas de desktop e input="touch" corresponde aos dispositivos de toque.

Propriedades CSS da sobreposição

Quando a variável overlay está definido como 1, a área ao redor do quadro de realce ou da imagem do cursor é controlada com o seletor de classe CSS:

 .s7flyoutviewer .s7flyoutzoomview
.s7overlay

Propriedade CSS

Descrição

background-color

Cor de sobreposição.

opacidade

Opacidade de sobreposição.

Propriedades CSS da mensagem de dica

A aparência da mensagem de dica é controlada com o seguinte seletor de classe CSS:

.s7flyoutviewer .s7flyoutzoomview .s7tip

É possível configurar o estilo da fonte, o tamanho, a aparência e o deslocamento vertical por meio do CSS. No entanto, o alinhamento horizontal é gerenciado pela lógica do visualizador. Substituição por CSS usando left ou right não há suporte para propriedades.

Propriedade CSS

Descrição

bottom

Deslocamento da parte inferior da exibição principal.

cor

Cor do texto.

font-family

Nome da fonte.

font-size

Tamanho da fonte.

preenchimento

Preenchimento ao redor do texto da mensagem.

background-color

Cor de preenchimento do fundo do texto da mensagem.

border-radius

Raio da borda do fundo do texto da mensagem.

opacidade

Opacidade do plano de fundo do texto da mensagem.

Para o Internet Explorer 8, use filtro:alfa(opacidade-...) )

A mensagem de dica pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - para configurar uma mensagem de dica semitransparente com fonte Arial® de 12 px branca, deslocamento de 50 pixels da parte inferior da exibição principal, preenchimento e uma borda arredondada:

.s7flyoutviewer .s7flyoutzoomview .s7tip {
bottom: 50px;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 12px;
padding-right: 12px;
background-color: #000000;
border-radius: 4px;
opacity: 0.5;
filter: alpha(opacity = 50);
}

Nesta página