Miniaturen thumbnails

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:

.s7ecatalogviewer .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.
marge-rechts
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 een marge van 5 pixels aan de linker- en rechterkant en een marge van 8 pixels aan de onderkant, met 0xDDDDDD achtergrond.

.s7ecatalogviewer .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:

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell

CSS-eigenschap
Beschrijving
marge
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.

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

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

.s7ecatalogviewer .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
De miniatuur ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende miniatuurtoestanden. Met name: state="selected" komt overeen met de miniatuur voor de afbeelding die momenteel wordt weergegeven in de hoofdweergave, state="default" overeenkomt met de rest van de miniaturen, en state="over" wordt gebruikt bij 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.

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

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

.s7ecatalogviewer .s7thumbnailgridview .s7label

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

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

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

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

.s7ecatalogviewer .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.

.s7ecatalogviewer .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:

.s7ecatalogviewer .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.

.s7ecatalogviewer .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:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS-eigenschap
Beschrijving
width
De breedte van het schuifbalkblokje.
height
De hoogte van de schuifbalkminiatuur.
opvullen boven
De verticale opvulling tussen de bovenkant van het schuifbalkvak.
opvullen-onder
De verticale opvulling tussen de onderkant van het schuifbalkvak.
achtergrondafbeelding
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 state kenmerkenkiezer, 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.

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

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Het is niet mogelijk om de schuifknoppen met CSS te positioneren top, left, bottom, en right eigenschappen. 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.
achtergrondafbeelding
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 kenmerkenkiezer, 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 Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - voor het instellen van schuifknoppen met een resolutie van 28 x 32 pixels en voor elke status een andere illustratie.

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