Condivisione social

Per impostazione predefinita, lo strumento condivisione social viene visualizzato nell'angolo superiore destro. È costituito da un pulsante e da un pannello che si espande quando l’utente fa clic o tocca un pulsante e contiene singoli strumenti di condivisione.

La posizione e le dimensioni dello strumento di condivisione social network nell’interfaccia utente del visualizzatore sono controllate da quanto segue:

.s7video360viewer .s7socialshare

Proprietà CSS dello strumento condivisione social

top

Posizione verticale dello strumento di condivisione social network rispetto al contenitore del visualizzatore.

left

Posizione orizzontale dello strumento di condivisione social network rispetto al contenitore del visualizzatore.

width

Larghezza dello strumento di condivisione social.

height

Altezza dello strumento di condivisione social.

Esempio : per impostare uno strumento di condivisione social, posizionato quattro pixel dall’alto e cinque pixel dalla destra del contenitore visualizzatore e ridimensionato a 28 x 28 pixel.

.s7interactivevideoviewer .s7socialshare {
 top:4px;
 right:5px;
 width:28px;
 height:28px;
}

L’aspetto del pulsante dello strumento Condivisione social è controllato dal seguente selettore di classe CSS:

.s7video360viewer .s7socialshare .s7socialbutton

Proprietà CSS del pulsante dello strumento condivisione social

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 interfacce diverse a stati di pulsante diversi.

La descrizione comando del pulsante può essere localizzata. Consulta Localizzazione degli elementi dell’interfaccia utente.

Esempio : per impostare un pulsante per lo strumento di condivisione social che mostri un'immagine diversa per ciascuno dei quattro diversi stati dei pulsanti.

.s7video360viewer .s7socialshare .s7socialbutton[state='up'] {
background-image:url(images/v2/SocialShare_video_dark_up.png);
}
.s7video360viewer .s7socialshare .s7socialbutton[state='over'] {
background-image:url(images/v2/SocialShare_dark_over.png);
}
.s7video360viewer .s7socialshare .s7socialbutton[state='down'] {
background-image:url(images/v2/SocialShare_dark_down.png);
}
.s7video360viewer .s7socialshare .s7socialbutton[state='disabled'] {
background-image:url(images/v2/SocialShare_dark_disabled.png);
}

L’aspetto del pannello che contiene le singole icone di condivisione social è controllato dal seguente selettore di classe CSS:

.s7video360viewer .s7socialshare .s7socialsharepanel

Proprietà CSS del pannello Condivisione social

background-color

Colore di sfondo del pannello.

Esempio - Per impostare un pannello in modo che presenti un colore trasparente:

.s7video360viewer .s7socialshare .s7socialsharepanel {
 background-color: transparent;
}

In questa pagina