DocumentatieNaslaggids voor dynamische mediasviewers

Miniaturen thumbnails

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

Gemaakt voor:

  • Ontwikkelaar
  • Gebruiker

Miniaturen bestaan uit een raster van miniatuurafbeeldingen met een optionele schuifbalk aan de rechterkant om verticaal schuiven mogelijk te maken.

U schakelt miniaturen in of uit door op de miniatuurknop in de hoofdbesturingsbalk te klikken. Wanneer miniaturen actief zijn, worden deze in de modale modus weergegeven boven op de gebruikersinterface van de viewer. De viewerlogica wijzigt de grootte van de miniatuurcontainer automatisch in het gehele viewergebied.

De vormgeving van de container met miniaturen wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7thumbnailgridview

CSS-eigenschap
Beschrijving
top
De verticale verschuiving van de container met miniaturen vanaf de bovenkant van de viewer.
margin-top
De bovenmarge.
margin-left
De linkermarge.
margin-right
De rechtermarge.
margin-bottom
De ondermarge.
background-color
De achtergrondkleur van het gebied met miniaturen.

Voorbeeld - als u miniaturen wilt instellen met een verschuiving van 32 pixels ten opzichte van de bovenkant, met marges van 5 pixels aan de linker- en rechterkant en met een marge van 8 pixels aan de onderkant, met 0xDDDDDD achtergrond.

.s7ecatalogsearchviewer .s7thumbnailgridview {
 top: 32px;
 margin-left: 5px;
 margin-right: 5px;
 margin-bottom: 8px;
 background-color: rgb(221, 221, 221);
}

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

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

Voorbeeld - om een ruimte van 10 pixels zowel verticaal als horizontaal in te stellen.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell {
 margin: 5px;
}

De vormgeving van afzonderlijke miniaturen wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

CSS-eigenschap
Beschrijving
width
De breedte van de miniatuur.
height
De hoogte van de miniatuur.
border
De rand van de miniatuur.
background-color
De achtergrondkleur van de miniatuur.

Als de gebruiker op aanraakapparaten wordt gedraaid in de staande modus, kan de grootte van de miniaturen de helft bedragen van de configuratie als de gebruiker besluit de catalogusspread op afzonderlijke pagina's te splitsen.

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 120 x 85 pixels zijn, hebt u een witte achtergrond, een lichtgrijze standaardrand en een donkergrijze geselecteerde rand.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb {
 width:120px;
 height:85px;
 background-color: rgb(255, 255, 255);
 border: solid 1px #999999;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb[state="selected"]{
 border: solid 2px #666666;
}

De vormgeving van het label van de miniatuur wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

CSS-eigenschap
Beschrijving
font-family
Fontnaam.
font-size
Tekengrootte.

Voorbeeld: als u labels wilt instellen voor gebruik van 14 pixels Helvetica®-lettertype.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 12px;
}

Als er meer miniaturen zijn dan verticaal in de weergave passen, wordt met miniaturen de verticale schuifbalk aan de rechterkant weergegeven. De vormgeving van het gebied van de schuifbalk wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

CSS-eigenschap
Beschrijving
width
De breedte van de schuifbalk.
top
De verticale verschuiving van de schuifbalk vanaf de bovenkant van het gebied met miniaturen.
bottom
De verticale verschuiving van de schuifbalk vanaf de onderkant van het gebied met miniaturen.
right
De verschuiving van de horizontale schuifbalk ten opzichte van de rechterrand van het gebied met miniaturen.

Voorbeeld - om een schuifbalk in te stellen die 28 pixels breed is en een marge van 8 pixels heeft vanaf de bovenkant, de rechterkant en de onderkant van het miniatuurgebied.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar {
 top:8px;
 bottom:8px;
 right:8px;
 width:28px;
}

Het schuifbalkvak is het gebied tussen de bovenste en onderste schuifknop. De component stelt automatisch de positie en de hoogte van het spoor in. De track wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSS-eigenschap
Beschrijving
width
De breedte van het schuifbalkvak.
background-color
De achtergrondkleur van het schuifbalkvak.

Voorbeeld - voor het instellen van een schuifbalkvak met een breedte van 28 pixels en een halftransparante grijze achtergrond.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

Het schuifbalkblokje verplaatst zich verticaal binnen het gebied van het schuifvak. De verticale positie wordt volledig bepaald door de componentlogica, maar de hoogte van het blokje verandert niet dynamisch, afhankelijk van de hoeveelheid inhoud. De duimhoogte en andere aspecten worden gecontroleerd met de volgende CSS klassenselecteur:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS-eigenschap
Beschrijving
width
De breedte van het schuifbalkblokje.
height
De hoogte van de schuifbalkminiatuur.
padding-top
De verticale opvulling tussen de bovenkant van het schuifbalkvak.
padding-bottom
De verticale opvulling tussen de onderkant van het schuifbalkvak.
background-image
De afbeelding die voor een bepaalde duimstatus wordt weergegeven.
background-position

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

Zie ook CSS Sprites.

NOTE
Miniatuur ondersteunt de kenmerkenkiezer state , die kan worden gebruikt om verschillende skins toe te passen op de blokstatussen up , down , over en disabled .

Voorbeeld: als u een schuifbalkblokje van 28 x 45 pixels wilt instellen, hebt u bovenaan en onderaan een marge van 10 pixels en hebt u voor elk frame een andere illustratie.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

De vormgeving van de bovenste en onderste schuifknoppen wordt bepaald door de volgende CSS-klassekiezers:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

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

CSS-eigenschap
Beschrijving
width
De breedte van de knop.
height
De hoogte van de knop.
background-image
De afbeelding die voor een bepaalde duimstatus wordt weergegeven.
background-position

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

Zie ook CSS Sprites.

NOTE
Deze knoppen ondersteunen de state -kenmerkkiezer, die kan worden gebruikt om verschillende skins toe te passen op de 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 resolutie van 28 x 32 pixels en voor elke status een andere illustratie.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8