Muestras principales main-swatches
Las muestras principales 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.
El aspecto del contenedor de muestras se controla con el selector de clases CSS:
.s7mixedmediaviewer .s7swatches
Propiedades CSS de las muestras
Ejemplo: Configuración de muestras con una altura de 100 píxeles.
.s7mixedmediviewer .s7swatches {
height: 100px;
}
El espaciado entre las miniaturas de muestra se controla con el siguiente selector de clase CSS:
.s7mixedmediaviewer .s7swatches .s7thumbcell
Ejemplo
Para establecer el espaciado en diez píxeles tanto vertical como horizontalmente.
.s7mixedmediaviewer .s7swatches .s7thumbcell {
margin: 5px;
}
El aspecto de la miniatura individual se controla con el siguiente selector de clase CSS:
.s7mixedmediaviewer .s7swatches .s7thumb
state
, 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 las 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.
.s7mixedmediaviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7mixedviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
El tipo de recurso se muestra como un icono superpuesto sobre la imagen en miniatura y se controla con el siguiente selector de clase CSS:
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay
La superposición admite el selector de atributos type
con los siguientes valores posibles: image
(para imágenes únicas), swatchset
(para conjuntos de muestras), spinset
(para conjuntos de giros) y video
(para vídeos únicos o conjuntos de vídeos adaptables).
Ejemplo: para configurar superposiciones de iconos para conjuntos de giros, conjuntos de muestras y vídeos:
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="swatchset"] {
background-image: url(images/v2/ThumbOverlaySwatchSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="spinset"] {
background-image: url(images/v2/ThumbOverlaySpinSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="video"] {
background-image: url(images/v2/ThumbOverlayVideo.png);
}
El aspecto de los botones de desplazamiento izquierdo y derecho se controla con los siguientes selectores de clase CSS:
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton
No es posible colocar botones de desplazamiento con las propiedades CSS top
, left
, bottom
y right
. En su lugar, la lógica del visor los coloca automáticamente.
Coloque dentro del icono de ilustración si se utilizan iconos CSS.
Ver Sprites CSS.
state
, que se puede utilizar para aplicar distintas máscaras a diferentes 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 para obtener más información.
Por ejemplo, para configurar botones de desplazamiento de 56 x 56 píxeles con ilustraciones diferentes para cada estado.
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}