Campioni principali

I campioni principali sono costituiti da una riga di miniature con pulsanti di scorrimento opzionali sul lato sinistro e destro. I pulsanti di scorrimento sono visibili sul desktop solo se tutte le miniature non rientrano nella larghezza del contenitore. Sui dispositivi mobili o se le miniature possono rientrare nella larghezza del contenitore, i pulsanti di scorrimento non vengono visualizzati.

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

.s7mixedmediaviewer .s7swatches

Proprietà CSS dei campioni

height

Altezza dei campioni.

bottom

Offset dei campioni verticali rispetto al contenitore del visualizzatore.

Esempio: per impostare campioni con altezza di 100 pixel.

.s7mixedmediviewer .s7swatches {
 height: 100px;
}

La spaziatura tra le miniature dei campioni è controllata dal seguente selettore di classe CSS:

.s7mixedmediaviewer .s7swatches .s7thumbcell

Proprietà CSS

Descrizione

margine

La dimensione del margine orizzontale e verticale intorno a ciascuna miniatura. La spaziatura effettiva delle miniature è uguale alla somma dei margini sinistro e destro impostati per .s7thumbcell .

Esempio

Per impostare la spaziatura su dieci pixel sia in verticale che in orizzontale.

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

height

Altezza della miniatura.

bordo

Bordo della miniatura.

NOTA

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

Esempio: per impostare miniature di 56 x 56 pixel, con 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 icona sopra l’immagine miniatura ed è controllato dal seguente selettore di classe CSS:

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay

Proprietà CSS

Descrizione

width

Larghezza della sovrapposizione icona.

height

Altezza della sovrapposizione icona.

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

Esempio: per impostare le 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 sinistro e destro è controllato dai seguenti selettori di classi CSS:

.s7mixedmediaviewer .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7swatches .s7scrollrightbutton

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

Proprietà CSS

Descrizione

width

Larghezza del pulsante di scorrimento.

height

Altezza del pulsante di scorrimento.

background-image

Immagine visualizzata per un determinato stato del pulsante.

background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS .

NOTA

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

Le descrizioni dei pulsanti possono essere localizzate. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio: per impostare pulsanti di scorrimento di 56 x 56 pixel con grafica diversa 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