Sociaal aandeel social-share

Het gereedschap Delen via sociale media wordt standaard in de rechterbovenhoek weergegeven. Het bestaat uit een knop en een deelvenster dat groter wordt wanneer de gebruiker op een knop klikt of tikt en afzonderlijke gereedschappen voor delen bevat.

De positie en grootte van het gereedschap voor sociaal delen in de gebruikersinterface van de viewer worden als volgt bepaald:

.s7video360viewer .s7socialshare

CSS-eigenschappen van het gereedschap voor sociaal delen

Voorbeeld - Een gereedschap voor sociaal delen instellen dat zich vier pixels van de bovenkant en vijf pixels van de rechterkant van de viewercontainer bevindt en een grootte van 28 x 28 pixels heeft.

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

De vormgeving van de knop voor het gereedschap Sociaal delen wordt bepaald door de volgende CSS-klassenkiezer:

.s7video360viewer .s7socialshare .s7socialbutton

CSS-eigenschappen van de knop voor het gereedschap voor sociaal delen

De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen.

Voorbeeld - Een knop voor een gereedschap voor sociaal delen instellen waarmee een andere afbeelding wordt weergegeven voor elk van de vier verschillende knopstatussen.

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

De weergave van het deelvenster met de afzonderlijke pictogrammen voor sociaal delen wordt bepaald door de volgende CSS-klassenkiezer:

.s7video360viewer .s7socialshare .s7socialsharepanel

CSS-eigenschappen van het deelvenster voor sociaal delen

Voorbeeld - Een deelvenster instellen voor transparante kleuren:

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