Miniatures 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 miniatures sont activées en cliquant sur le bouton de miniature dans la barre de contrôle principale. Lorsque les miniatures sont actives, elles s’affichent en mode modal superposé sur l’interface utilisateur de la visionneuse. La logique de la visionneuse redimensionne automatiquement le conteneur de miniatures sur l’ensemble de la zone de visionneuse.

L’aspect du conteneur de miniatures est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview

propriété CSS
Description
top
Décalage vertical du conteneur de miniatures depuis le haut de la visionneuse.
margin-top
Marge supérieure.
margin-left
Marge gauche.
margin-right
Marge droite.
margin-bottom
La marge inférieure.
background-color
Couleur d’arrière-plan de la zone des miniatures.

Exemple : pour configurer des miniatures 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 au bas, avec un arrière-plan 0xDDDDDD.

.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é à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

propriété CSS
Description
margin
Taille de la marge horizontale et verticale autour de chaque miniature. L’espacement réel des miniatures horizontales est égal à la somme des marges gauche et droite définies pour .s7thumbcell . L’espacement vertical des miniatures est égal à la somme des marges supérieure et inférieure.

Exemple : pour définir un espace de 10 pixels verticalement et horizontalement.

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

L’aspect des miniatures individuelles est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

propriété CSS
Description
width
Largeur de la miniature.
height
Hauteur de la miniature.
bordure
Bordure de la miniature.
background-color
Couleur d’arrière-plan de la miniature.

Sur les appareils tactiles, lorsqu’ils sont pivotés en mode portrait, la visionneuse peut dimensionner les miniatures à la moitié de ce qui est configuré au cas où elle décide de diviser le catalogue en pages individuelles.

NOTE
La miniature prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages à différents états de miniature. En particulier, state="selected" correspond à la miniature de l’image actuellement affichée dans la vue principale, state="default" correspond au reste des miniatures et state="over" est utilisé au survol de la souris.

Exemple : pour configurer des miniatures de 120 x 85 pixels, elles ont un arrière-plan blanc, une bordure standard en gris clair et une bordure sélectionnée en 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’aspect du libellé de la miniature est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

propriété CSS
Description
font-family
Nom de la police.
font-size
Taille de police.

Exemple : pour configurer des libellés afin d’utiliser une police Helvetica® de 14 pixels.

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

S’il existe plus de miniatures que celles pouvant tenir verticalement dans la vue, les miniatures affichent la barre de défilement verticale sur le côté droit. L’aspect de la zone de barre de défilement est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

propriété CSS
Description
width
Largeur de la barre de défilement.
top
Décalage de la barre de défilement verticale par rapport au haut de la zone des miniatures.
bottom
Décalage de la barre de défilement verticale par rapport au bas de la zone des miniatures.
droit
Décalage de la barre de défilement horizontale à partir du bord droit de la zone des miniatures.

Exemple : pour configurer une barre de défilement de 28 pixels de large et dont la marge de 8 pixels se situe en haut, à droite et en bas de la zone des miniatures.

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

La barre de défilement est la zone entre les boutons de défilement haut et bas. Le composant définit automatiquement la position et la hauteur du suivi. Le suivi est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

propriété CSS
Description
width
Largeur de la barre de défilement.
background-color
Couleur d’arrière-plan du suivi de la barre de défilement.

Exemple : pour configurer un suivi de barre de défilement de 28 pixels de large et avec un arrière-plan gris semi-transparent.

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

La barre de défilement se déplace verticalement dans la zone de suivi de défilement. Sa position verticale est entièrement contrôlée par la logique du composant. Toutefois, 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 avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

propriété CSS
Description
width
Largeur de la barre de défilement.
height
Hauteur de la miniature de la barre de défilement.
padding-top
Marge intérieure verticale entre le haut de la barre de défilement.
padding-bottom
Marge intérieure verticale entre le bas de la barre de défilement.
background-image
Image affichée pour un état de pouce donné.
background-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi Sprites CSS.

NOTE
La miniature prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages aux états de la miniature up, down, over et disabled.

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 une illustration différente 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’aspect des boutons de défilement haut et bas est contrôlé à l’aide des 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 des propriétés CSS top, left, bottom et right. La logique de la visionneuse les positionne automatiquement.

propriété CSS
Description
width
Largeur du bouton.
height
Hauteur du bouton.
background-image
Image affichée pour un état de pouce donné.
background-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi Sprites CSS.

NOTE
Ces boutons prennent en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages aux différents états de bouton up, down, over et disabled.

L’info-bulle de bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour configurer des boutons de défilement de 28 x 32 pixels et ayant des 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8