Interactieve stalen interactive-swatches

Het interactieve deelvenster Stalen wordt naast de video-inhoud weergegeven als interactieve gegevens in configuratie zijn doorgegeven aan de viewer. Het bestaat uit een banner bovenaan die tekst zoals "Klik om te bekijken", een kolom van één of meerdere interactieve monsters en twee rolknopen (beschikbaar slechts op Desktopsystemen) teruggeeft.

Op desktopsystemen en op aanraakapparaten worden interactieve stalen in liggende richting verticaal rechts van de video-inhoud weergegeven. Op aanraakapparaten met een staande oriëntatie worden deze onder aan de viewer weergegeven als een horizontale rij stalen.

De volgende CSS-klassenkiezer bepaalt de locatie en richting van het interactieve deelvenster Stalen:

.s7interactivevideoviewer .s7interactiveswatches

CSS-eigenschappen van de interactieve stalen css-properties-of-the-interactive-swatches

De locatie en richting van het interactieve deelvenster Stalen tijdens runtime worden als volgt gedefinieerd door een combinatie van de bovenstaande CSS-eigenschappen:

Het is mogelijk CSS-markeringen met deze opmaak te gebruiken om het interactieve deelvenster Stalen op een aangepaste manier te plaatsen.

Voorbeeld example

Een interactief deelvenster Stalen instellen om horizontaal, onder aan de viewer, te renderen op aanraakapparaten met de oriëntatie Liggend. En om het verticaal aan de rechterkant van de video-inhoud in alle andere gevallen te tonen:

.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches,
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches {
 width:120px;
 height:auto;
 right:0px;
 top:0px;
 left:auto;
 bottom:auto;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches {
 width:auto;
 height:136px;
 right:auto;
 top:auto;
 left:0px;
 bottom:0px;
}

De grootte en positie van de banner worden beheerd door de interactieve staalcomponent op basis van andere stijlen die met CSS zijn toegepast en kunnen niet expliciet worden ingesteld.

De volgende CSS-klassenkiezer bepaalt de vormgeving van het bannerpaneel:

.s7interactivevideoviewer .s7interactiveswatches .s7banner

CSS-eigenschappen van het paneel Banner css-properties-of-the-banner-panel

De knopinfo voor de banner kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld section-e8caea0a303c425a8a637c2a47c06355

Als u een banner wilt instellen met een donkergrijze achtergrond, lichtere grijze rand van twee pixels en de witte tekst horizontaal gecentreerd:

.s7interactivevideoviewer .s7interactiveswatches .s7banner {
    background-color: #222222;
    border-bottom: 2px solid #444444;
    color: #ffffff;
    text-align: center;
}

De volgende CSS-klassenkiezer bepaalt de weergave van de stalen:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

CSS-eigenschappen van het staalgebied css-properties-of-the-swatches-area

Voorbeeld section-9cadd62a09fd44a280f55ff42437e416

Stalen instellen met donkergrijze achtergrond:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
    background-color: #222222;
}

De volgende CSS-klassenkiezer bepaalt de afstand tussen staalminiaturen:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

CSS-eigenschappen van de miniatuurafstand van stalen css-properties-of-the-swatches-thumbnail-spacing

Voorbeeld section-39fb270b7e494a9d99e6e8f6890ec53c

De verticale afstand instellen op tien pixels:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell {
 margin: 5px;
}

De volgende CSS-klassenkiezer bepaalt de weergave van afzonderlijke miniaturen:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

CSS-eigenschappen van de weergave van afzonderlijke miniaturen css-properties-of-the-appearance-of-individual-thumbnails

Voorbeeld section-69fec189ffaa440b97b6b846c320b75b

Miniaturen van 100 x 75 pixels instellen:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
 width:100px;
 height:75px;
}

De volgende CSS-klassenkiezer bepaalt de vormgeving van het miniatuurlabel:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

CSS-eigenschappen van de weergave van het miniatuurlabel css-properties-of-the-appearance-of-the-thumbnail-label

Voorbeeld section-eb141eb6c1154183baa69796edb90536

Als u labels wilt instellen voor links uitgelijnd, wit en 12 pixels in het Helvetica®-lettertype en een onderrand:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label {
 border-bottom: 1px solid #e9e9e9;
 text-align: left;
color: #ffffff;
font-family: Helvetica,sans-serif;
font-size: 12px;
}

Met de volgende CSS-klassenkiezer bepaalt u de vormgeving van de schuifknoppen Omhoog en Omlaag:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton

.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton

Het is niet mogelijk om de schuifknoppen te positioneren met de CSS-eigenschappen top , left , bottom en right . In plaats daarvan worden ze automatisch geplaatst door de viewerlogica.

CSS-eigenschappen van de weergave van de schuifknoppen Omhoog en Omlaag css-properties-of-the-appearance-of-the-up-and-down-scroll-buttons

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld section-e6ce4fa084b84288bc7583342b2c510c

Als u een schuifknop van 60 x 36 pixels wilt instellen, hebt u voor elke staat een andere illustratie en haalt u die illustratie uit de sprite-afbeelding van de component:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton {
 background-size: 120px;
 width: 60px;
 height: 36px;
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] {
 background-image: url(images/v2/InteractiveSwatches_light_sprite.png);
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }