Las muestras constan de una fila de imágenes en miniatura con botones de desplazamiento opcionales en el lado izquierdo y derecho. Los botones de desplazamiento solo están visibles en el escritorio si todas las miniaturas no se ajustan al ancho del contenedor. En dispositivos móviles, o si las miniaturas pueden ajustarse al ancho del contenedor, no se muestran los botones de desplazamiento.
.s7zoomviewer .s7swatches
Propiedades CSS del área principal del visor
El aspecto del contenedor de muestras se controla con el siguiente selector de clase CSS:
.s7zoomviewer .s7zoomresetbutton
CSS, propiedad |
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 a 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
CSS, propiedad |
Descripción |
---|---|
margin |
El tamaño del margen horizontal y vertical alrededor de cada miniatura. El espaciado de la miniatura real es igual a la suma del margen izquierdo y derecho definido para .s7thumbcell . |
Ejemplo
Configurar 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
CSS, propiedad |
Descripción |
---|---|
width |
Anchura de la miniatura. |
height |
Altura de la miniatura. |
borde |
Borde de la miniatura. |
La miniatura es compatible con el state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a distintos 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 utilizando las propiedades CSS arriba, izquierda, abajo y derecha. En su lugar, la lógica del visor los coloca automáticamente.
CSS, propiedad |
Descripción |
---|---|
width |
Anchura del botón de desplazamiento. |
height |
Altura del botón de desplazamiento. |
imagen de fondo |
Imagen que se muestra para un estado de botón determinado. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS . |
Este botón admite la variable 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 botones se puede localizar. Consulte Localización de los elementos de la interfaz de usuario.
Ejemplo: para configurar botones de desplazamiento de 56 x 56 píxeles y que tengan distintas ilustraciones 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);
}