DocumentatieNaslaggids voor dynamische mediasviewers

Hoofdstalen main-swatches

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Ontwikkelaar
  • Gebruiker

Hoofdstalen bestaan uit een rij miniatuurafbeeldingen met optionele schuifknoppen aan de linker- en rechterkant. Schuifknoppen zijn alleen zichtbaar op het bureaublad als alle miniaturen niet in de breedte van de container passen. Op mobiele apparaten, of als de duimnagels in de containerbreedte kunnen passen, worden de rolknopen niet getoond.

De vormgeving van de stalencontainer wordt beheerd met de CSS-klassenkiezer:

.s7mixedmediaviewer .s7swatches

CSS eigenschappen van de monsters

height
De hoogte van de stalen.
bottom
De verticale verschuiving van stalen ten opzichte van de viewercontainer.

Voorbeeld - voor het instellen van stalen met een hoogte van 100 pixels.

.s7mixedmediviewer .s7swatches {
 height: 100px;
}

De afstand tussen de staalminiaturen wordt geregeld met de volgende CSS-klassenkiezer:

.s7mixedmediaviewer .s7swatches .s7thumbcell

CSS-eigenschap
Beschrijving
margin
De grootte van de horizontale en verticale marge rond elke miniatuur. De werkelijke miniatuurafstand is gelijk aan de som van de linker- en rechtermarge die is ingesteld voor .s7thumbcell .

Voorbeeld

U stelt de tussenruimte in op tien pixels, zowel verticaal als horizontaal.

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

De weergave van de afzonderlijke miniatuur wordt bepaald door de volgende CSS-klassenkiezer:

.s7mixedmediaviewer .s7swatches .s7thumb

CSS-eigenschap
Beschrijving
width
Breedte van de miniatuur.
height
Hoogte van de miniatuur.
border
Rand van de miniatuur.
NOTE
Miniatuur ondersteunt de kenmerkenkiezer van state , die kan worden gebruikt om verschillende skins toe te passen op verschillende miniatuurtoestanden. Met name state="selected" komt overeen met de miniatuur van de afbeelding die momenteel wordt weergegeven in de hoofdweergave, state="default" komt overeen met de rest van de miniaturen en state="over" wordt gebruikt bij de muisaanwijzer.

Voorbeeld: als u miniaturen wilt instellen die 56 x 56 pixels zijn, hebt u een lichtgrijze standaardrand en een donkergrijze geselecteerde rand.

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

Het type element wordt weergegeven als een pictogram dat boven op de miniatuurafbeelding wordt geplaatst en wordt bestuurd met de volgende CSS-klassenkiezer:

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay

CSS-eigenschap
Beschrijving
width
Breedte van de pictogrambedekking.
height
Hoogte van de pictogrambedekking.

De overlay ondersteunt de kenmerkenkiezer van type met de volgende mogelijke waarden: image (voor enkele afbeeldingen), swatchset (voor stalensets), spinset (voor centrifuges) en video (voor enkele video's of adaptieve videosets).

Voorbeeld - voor het instellen van pictogramoverlays voor centrifuges, stalensets en video's:

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

De vormgeving van de linker- en rechterschuifknoppen wordt bepaald door de volgende CSS-klassekiezers:

.s7mixedmediaviewer .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7swatches .s7scrollrightbutton

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

CSS-eigenschap
Beschrijving
width
Breedte van de schuifknop.
height
Hoogte van de schuifknop.
background-image
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie CSS-sprites.

NOTE
Deze knop ondersteunt de kenmerkenkiezer state , die kan worden gebruikt om verschillende skins toe te passen op verschillende knopstatussen: up , down , over en disabled .

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

Voorbeeld - voor het instellen van schuifknoppen met een grootte van 56 x 56 pixels en voor elke status met een andere illustratie.

.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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8