Muestras principales

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 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.

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

.s7mixedmediaviewer .s7swatches

Propiedades CSS 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 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

CSS, propiedad

Descripción

margin

El tamaño de los márgenes horizontal y vertical alrededor de cada miniatura. El espaciado en miniatura real es igual a la suma de los márgenes izquierdo y derecho establecidos para .s7thumbcell .

Ejemplo

Configurar 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

CSS, propiedad

Descripción

width

Anchura de la miniatura.

height

Altura de la miniatura.

borde

Borde de la miniatura.

NOTA

La miniatura admite el selector de atributos state, que puede utilizarse para aplicar diferentes aspectos a diferentes estados de miniaturas. En concreto, 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.

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

CSS, propiedad

Descripción

width

Anchura de la superposición del icono.

height

Altura de la superposición del icono.

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 individuales 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 utilizando las propiedades CSS top, left, bottom y right. 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 .

NOTA

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes aspectos a diferentes 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 para obtener más información.

Ejemplo: para configurar botones de desplazamiento de 56 x 56 píxeles y que tengan distintas ilustraciones 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); 
}

En esta página