Vista de zoom flotante flyout-zoom-view

En el modo de zoom en línea, la vista principal consiste en la imagen estática. También consta de la imagen ampliada que se muestra en la vista flotante sobre la imagen estática y el mensaje de sugerencia que se muestra sobre la imagen estática.

Propiedades CSS del área de visor principal

El aspecto de la vista principal se controla con el siguiente selector de clase CSS:

.s7mixedmediaviewer .s7flyoutzoomview

Ejemplo: para hacer transparente la vista principal:

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

El aspecto del mensaje de sugerencia se controla con el siguiente selector de clase CSS:

.s7mixedmediaviewer .s7flyoutzoomview .s7tip

Es posible configurar el estilo de fuente, el tamaño, el aspecto y el desplazamiento vertical mediante CSS. Sin embargo, la alineación horizontal la administra la lógica del visor. No se admite anularlo mediante CSS utilizando las propiedades left o right.

Propiedades CSS del mensaje de sugerencia

El mensaje de sugerencia se puede localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.

Ejemplo: Para configurar un mensaje de punta semitransparente con una fuente Arial® blanca de 12 píxeles, un desplazamiento de 50 píxeles desde la parte inferior de la vista principal, relleno y borde redondeado:

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