Miniatyrbilder thumbnails

Miniatyrbilder består av ett rutnät med miniatyrbilder med en valfri rullningslist till höger för att tillåta lodrät rullning.

Miniatyrbilder växlas genom att du klickar på miniatyrknappen i huvudkontrollfältet. När miniatyrbilder är aktiva visas de i modalt läge ovanpå visningsprogrammets användargränssnitt. Visningslogiken ändrar automatiskt storlek på miniatyrbehållaren till hela visningsområdet.

Utseendet på behållaren för miniatyrbilder styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7thumbnailgridview

Exempel - för att ställa in att miniatyrbilder ska ha 32 pixlar förskjutning från överkanten, 5 pixelmarginaler till vänster och höger och 8 pixlars marginal längst ned, med 0xDDDDDD bakgrund.

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

Avståndet mellan miniatyrbilder styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

Exempel - om du vill ange ett 10 pixlar stort utrymme både lodrätt och vågrätt.

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

Utseendet på enskilda miniatyrbilder styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

När visningsprogrammet roterar till stående läge på pekenheter kan det ändra storlek på miniatyrbilderna till hälften av vad som är konfigurerat om det skulle bestämma sig för att dela upp kataloguppslaget på enskilda sidor.

Exempel - Om du vill ställa in miniatyrbilder som är 120 x 85 pixlar har du en vit bakgrund, en ljusgrå standardkant och en mörkgrå markerad kant.

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

Utseendet på miniatyrbildetiketten styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

Exempel - för att ställa in etiketter så att de använder 14 pixlar Helvetica®-teckensnitt.

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

Om det finns fler miniatyrbilder än vad som får plats lodrätt i vyn återges den lodräta rullningslisten på höger sida av miniatyrbilder. Utseendet på rullningslistområdet styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

Exempel - om du vill ställa in en rullningslist som är 28 pixlar bred och har en 8-pixelmarginal upptill höger och nedtill i miniatyrbildområdet.

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

Rullningslistens spår är området mellan den övre och den nedre rullningsknappen. Komponenten ställer automatiskt in spårets position och höjd. Spåret styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Exempel - för att ställa in ett rullningslistspår som är 28 pixlar brett och har en halvgenomskinlig grå bakgrund.

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

Rullningslistens reglage rör sig lodrätt inom rullningsspårets område. Dess lodräta position styrs helt av komponentlogiken, men tumhöjden ändras inte dynamiskt beroende på mängden innehåll. Miniatyrhöjden och andra aspekter styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Exempel - om du vill ställa in en rullningslist som är 28 x 45 pixlar, har 10 pixelmarginaler högst upp och längst ned och har olika teckningar för varje läge.

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

Utseendet på de övre och nedre rullningsknapparna styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Det går inte att placera rullningsknapparna med CSS-egenskaperna top, left, bottom och right. I stället placerar visningsprogramlogiken dem automatiskt.

Knappens funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - för att ställa in rullningsknappar som är 28 x 32 pixlar och har olika teckningar för varje läge.

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