Campioni principali

I campioni principali sono costituiti da una riga di miniature con pulsanti di scorrimento opzionali a sinistra e a destra. I pulsanti di scorrimento sono visibili sul desktop solo se tutte le miniature non possono adattarsi alla larghezza del contenitore. Sui dispositivi mobili, o se le miniature possono adattarsi alla larghezza del contenitore, i pulsanti di scorrimento non vengono visualizzati.

L’aspetto del contenitore dei campioni è controllato con il selettore di classe CSS:

.s7mixedmediaviewer .s7swatches

Proprietà CSS dei campioni

height

Altezza dei campioni.

bottom

L’offset dei campioni verticali rispetto al contenitore del visualizzatore.

Esempio: per impostare campioni con un’altezza di 100 pixel.

.s7mixedmediviewer .s7swatches { 
 height: 100px;  
}

La spaziatura tra le miniature dei campioni viene controllata con il seguente selettore di classe CSS:

.s7mixedmediaviewer .s7swatches .s7thumbcell

Proprietà CSS

Descrizione

margine

Dimensione del margine orizzontale e verticale intorno a ciascuna miniatura. La spaziatura effettiva delle miniature è uguale alla somma del margine sinistro e destro impostato per .s7thumbcell .

Esempio

Impostare la spaziatura su dieci pixel sia verticalmente che orizzontalmente.

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

L’aspetto della singola miniatura viene controllato con il seguente selettore di classe CSS:

.s7mixedmediaviewer .s7swatches .s7thumb

Proprietà CSS

Descrizione

width

Larghezza della miniatura.

altezza

Altezza della miniatura.

border

Bordo della miniatura.

NOTA

La miniatura supporta il selettore di attributi state , che può essere utilizzato per applicare skin diversi a diversi stati di miniatura. In particolare, state="selected" corrisponde alla miniatura dell'immagine attualmente visualizzata nella vista principale, state="default" corrisponde alle altre miniature e state="over" viene utilizzato al passaggio del mouse.

Esempio : per impostare miniature con 56 x 56 pixel, sono disponibili un bordo predefinito grigio chiaro e un bordo selezionato grigio scuro.

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

Il tipo di risorsa viene visualizzato come un’icona sovrapposta all’immagine miniatura ed è controllato con il seguente selettore di classe CSS:

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay

Proprietà CSS

Descrizione

larghezza

Larghezza della sovrapposizione dell'icona.

altezza

Altezza della sovrapposizione dell'icona.

La sovrapposizione supporta il selettore di attributi type con i seguenti valori possibili: image (per immagini singole), swatchset (per set di campioni), spinset (per set 360 gradi) e video (per video singoli o set di video adattivi).

Esempio: per impostare sovrapposizioni di icone per set 360 gradi, set di campioni e video:

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

L’aspetto dei pulsanti di scorrimento a sinistra e a destra è controllato con i seguenti selettori di classe CSS:

.s7mixedmediaviewer .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7swatches .s7scrollrightbutton

Non è possibile posizionare i pulsanti di scorrimento utilizzando le proprietà CSS top, left, bottom e right. Al contrario, la logica del visualizzatore li posiziona automaticamente.

Proprietà CSS

Descrizione

larghezza

Larghezza del pulsante di scorrimento.

altezza

Altezza del pulsante di scorrimento.

immagine di sfondo

Immagine visualizzata per un determinato stato del pulsante.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Consulta Sprite CSS .

NOTA

Questo pulsante supporta il selettore di attributi state , che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante: up, down, over e disabled.

Le descrizioni dei pulsanti possono essere localizzate. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .

Esempio : per impostare pulsanti di scorrimento con 56 x 56 pixel e immagini diverse per ogni stato.

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

In questa pagina