DocumentaçãoGuia de referência de visualizadores do Dynamic Media

Exibição de página page-view

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • Desenvolvedor
  • Usuário

A exibição principal consiste na imagem do catálogo. Ele pode ser deslizado para chegar a outra página ou ampliado.

Propriedades CSS da área do visualizador principal

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

.s7ecatalogsearchviewer .s7pageview
Propriedade CSS
Descrição
cor de fundo
Cor de fundo da visualização principal em formato hexadecimal.
cursor
Cursor que é exibido sobre a exibição principal.

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

.s7ecatalogsearchviewer .s7pageview {
 background-color: transparent;
}

Em sistemas desktop, o componente oferece suporte ao seletor de atributos cursortype que pode ser aplicado à classe .s7pageview e controla o tipo de cursor com base no estado do componente e na ação do usuário. Os seguintes valores cursortype têm suporte:

Valor
Descrição
padrão
Exibido quando a imagem não é ampliada devido a uma pequena resolução de imagem, configurações de componente ou ambas.
zoomin
Exibido quando é possível ampliar a imagem.
redefiniu
Exibido quando a imagem está no nível de zoom máximo e pode ser redefinida para o estado inicial.
arrastar
Exibido quando o usuário expande a imagem que está no estado ampliado.
slide
Exibido quando o usuário executa uma troca de imagem passando o dedo horizontal ou o toque.

O divisor de página que separa visualmente as páginas esquerda e direita da página espelhada do catálogo é controlado com o seguinte seletor de classe CSS:

.s7ecatalogsearchviewer .s7pageview .s7pagedivider

Propriedade CSS
Descrição
largura
A largura do divisor de página. Defina como 0 px para ocultar o divisor completamente.
imagem de fundo
A imagem que você deseja usar como divisor de página.

Exemplo - Ter um divisor de página de 40 pixels de largura com imagem semitransparente.

.s7ecatalogsearchviewer .s7pageview .s7pagedivider {
 width:40px;
 background-image:url(images/sdk/divider.png);
}
NOTE
Quando o modificador frametransition é definido como turn ou auto (em sistemas desktop), a aparência do divisor de página é controlada com o modificador pageturnstyle e a classe CSS .s7pagedivider é ignorada.

É possível configurar a exibição do cursor do mouse personalizado sobre a área do visualizador principal. Essa capacidade é controlada com os seletores de atributos adicionais aplicados à classe CSS .s7ecatalogsearchviewer .s7pageview:

Propriedade CSS
Descrição
padrão
Normalmente, uma seta é exibida para imagens sem zoom.
zoomin
Mostra quando uma imagem pode ser ampliada.
redefiniu
Mostra quando uma imagem está no zoom máximo e pode ser redefinida.
arrastar
Mostra quando o usuário executa a operação de arrastar na imagem com zoom
slide
Mostra quando o usuário executa a troca de imagem usando o gesto do slide

Exemplo - ter cursores de mouse diferentes para cada tipo de estado do componente.

.s7ecatalogsearchviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8