Miniatures thumbnails

Les miniatures se composent d’une grille de 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 miniature dans la barre de contrôle principale. Lorsque les miniatures sont actives, elles s’affichent en mode modal, superposées sur l’interface utilisateur de la visionneuse. La logique de la visionneuse redimensionne automatiquement le conteneur des miniatures à l’ensemble de la zone de la visionneuse.

L’aspect du conteneur des miniatures est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview

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 en 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é avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

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

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

L’aspect de chaque miniature est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

Sur les appareils tactiles, lorsque vous passez en mode portrait, la visionneuse peut dimensionner les miniatures à la moitié de ce qui est configuré au cas où elle déciderait de fractionner la répartition du catalogue en pages individuelles.

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

Exemple - pour configurer les libellés afin d’utiliser la police Helvetica® de 14 pixels.

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

S’il y a plus de miniatures que ne peut en contenir verticalement dans la vue, les miniatures 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 avec une marge de 8 pixels en haut, à droite et en bas de la zone des miniatures.

.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 avec 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 sur un arrière-plan 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 de 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

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 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’aspect des boutons de défilement supérieur et inférieur 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. Au lieu de cela, la logique de la visionneuse les positionne automatiquement.

L’info-bulle du 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 avec 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);
}