Vignettes thumbnails

Les miniatures se composent d’une grille d’images miniatures avec une barre de défilement facultative sur le côté droit pour permettre le défilement vertical.

Les vignettes sont désactivées en cliquant sur le bouton de vignette dans la barre de contrôle principale. Lorsque les vignettes sont actives, elles s’affichent en mode modal superposé au-dessus de l’interface utilisateur de la visionneuse. La logique de visionneuse redimensionne automatiquement le conteneur des vignettes sur l’ensemble de la zone de visionneuse.

L’aspect du conteneur de vignettes est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview

Exemple : configurer des vignettes avec un décalage de 32 pixels par rapport au haut, des marges de 5 pixels à gauche et à droite et une marge de 8 pixels en bas, avec 0xDDDDDD arrière-plan.

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

L’espacement entre les miniatures est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

Exemple : définir un espace de 10 pixels à la fois verticalement et horizontalement.

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

L’apparence de la miniature individuelle est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

Sur les appareils tactiles, lorsqu’il est tourné en mode portrait, le spectateur peut dimensionner les vignettes à la moitié de ce qui est configuré au cas où il déciderait de diviser le catalogue en pages individuelles.

Exemple : pour configurer des vignettes de 120 x 85 pixels, dotées d’un arrière-plan blanc, d’une bordure standard gris clair et d’une bordure sélectionnée gris foncé.

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

L’apparence du libellé de la miniature est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

Exemple : pour configurer des étiquettes de sorte qu’elles utilisent la police Helvetica 14 pixels®.

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

S’il y a plus de vignettes que ce qui peut tenir verticalement dans la vue, les vignettes affichent la barre de défilement verticale sur le côté droit. L’apparence de la zone de la barre de défilement est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

Exemple - pour configurer une barre de défilement de 28 pixels de large et avec une marge de 8 pixels à partir du haut, de la droite et du bas de la zone des vignettes.

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

La piste de la barre de défilement est la zone située entre les boutons de défilement supérieur et inférieur. Le composant définit automatiquement la position et la hauteur de la piste. La piste est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Exemple - pour configurer une piste de barre de défilement de 28 pixels de large et avec un fond gris semi-transparent.

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

Le pouce de la barre de défilement se déplace verticalement dans la zone de piste de défilement. Sa position verticale est entièrement contrôlée par la logique du composant, cependant, la hauteur du pouce ne change pas dynamiquement en fonction de la quantité de contenu. La hauteur du pouce et d’autres aspects sont contrôlés par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Exemple : pour configurer une barre de défilement de 28 x 45 pixels, avec des marges de 10 pixels en haut et en bas et avec des illustrations différentes pour chaque état.

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

L’apparence des boutons de défilement supérieur et inférieur est contrôlée par les sélecteurs de classe CSS suivants :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Il n’est pas possible de positionner les boutons de défilement à l’aide de CSS top, left, bottomet right de ses propriétés. Au lieu de cela, la logique de la visionneuse les positionne automatiquement.

L’info-bulle du bouton peut être localisée. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - pour configurer des boutons de défilement de 28 x 32 pixels et dotés d’illustrations différentes pour chaque état.

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