Muestras swatches

Las muestras constan de una fila de imágenes en miniatura con botones de desplazamiento opcionales en los lados izquierdo y derecho. Los botones de desplazamiento solo están visibles en el escritorio si todas las miniaturas no caben en la anchura del contenedor. En dispositivos móviles, o si las miniaturas pueden ajustarse a la anchura del contenedor, no se muestran los botones de desplazamiento.

.s7zoomviewer .s7swatches

Propiedades CSS del área del visor principal

El aspecto del contenedor de muestras se controla con el siguiente selector de clase CSS:

.s7zoomviewer .s7zoomresetbutton
Propiedad CSS
Descripción
width
Anchura de las muestras.
height
Altura de las muestras.
parte inferior
Las muestras verticales se desplazan en relación con el contenedor del visor.

Ejemplo: para configurar muestras de 460 x 100 píxeles.

.s7zoomviewer .s7swatches {
 width: 460px;
 height: 100px;
}

El espaciado entre las miniaturas de muestra se controla con el siguiente selector de clase CSS:

.s7zoomviewer .s7swatches .s7thumbcell

Propiedad CSS
Descripción
margin
El tamaño del margen horizontal y vertical alrededor de cada miniatura. El espaciado real de las miniaturas es igual a la suma de los márgenes izquierdo y derecho establecidos para .s7thumbcell .

Ejemplo

Para establecer el espaciado en diez píxeles tanto vertical como horizontalmente.

.s7zoomviewer .s7swatches .s7thumbcell {
 margin: 5px;
}

El aspecto de la miniatura individual se controla con el siguiente selector de clase CSS:

.s7zoomviewer .s7swatches .s7thumb

Propiedad CSS
Descripción
width
Ancho de la miniatura.
height
Altura de la miniatura.
borde
Borde de la miniatura.
NOTE
La miniatura admite state selector de atributos, que se puede utilizar para aplicar diferentes aspectos a diferentes estados de miniaturas. En particular, state="selected" corresponde a la miniatura de la imagen que se muestra actualmente en la vista principal, state="default" corresponde al resto de miniaturas, y state="over" se utiliza al pasar el ratón por encima.

Ejemplo: para configurar miniaturas de 56 x 56 píxeles, tenga un borde predeterminado de gris claro y un borde seleccionado de gris oscuro.

.s7zoomviewer .s7swatches .s7thumb {
 width: 56px;
 height: 56px;
}
.s7zoomviewer .s7swatches .s7thumb[state="default"] {
 border: 1px solid #dddddd;
}
.s7zoomviewer .s7swatches .s7thumb[state="selected"] {
 border: 1px solid #666666;
}

El aspecto de los botones de desplazamiento izquierdo y derecho se controla con los siguientes selectores de clase CSS:

.s7zoomviewer .s7swatches .s7scrollleftbutton

.s7zoomviewer .s7swatches .s7scrollrightbutton

No es posible colocar botones de desplazamiento mediante las propiedades CSS top, left, bottom y right. En su lugar, la lógica del visor los coloca automáticamente.

Propiedad CSS
Descripción
width
Ancho del botón de desplazamiento.
height
Altura del botón de desplazamiento.
background-image
Imagen que se muestra para un estado de botón determinado.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte Sprites CSS.

NOTE
Este botón admite el state selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos estados de botones: up, down, over, y disabled.

La información sobre herramientas de los botones se puede localizar. Consulte Localización de elementos de la interfaz de usuario.

Por ejemplo, para configurar botones de desplazamiento de 56 x 56 píxeles con ilustraciones diferentes para cada estado.

.s7zoomviewer .s7swatches .s7scrollleftbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="over"]{
 background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="down"]{
 background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
 background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton {
 background-size: auto;
 width: 56px;
 height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="over"]{
 background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="down"]{
 background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
 background-image:url(images/v2/ScrollRightButton_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8