DocumentationAEMGuide de référence des visionneuses Dynamic Media

Page vue page-view

Dernière mise à jour : 15 août 2025

Créé pour :

  • Developer
  • User

La vue principale se compose de l’image du catalogue. Il peut être balayé pour accéder à une autre page ou agrandi.

Propriétés CSS de la zone de visionneuse principale

L’aspect de la zone d’affichage est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7pageview
Propriété CSS
Description
des de couleur d’arrière-plan
Couleur d’arrière-plan de la vue principale au format hexadécimal.
du curseur
Curseur affiché sur la vue principale.

Exemple : pour rendre la vue principale transparente.

.s7ecatalogsearchviewer .s7pageview {
 background-color: transparent;
}

Sur les systèmes de bureau, le composant prend en charge le sélecteur d’attributs cursortype qui peut être appliqué à .s7pageview classe et contrôle le type du curseur en fonction de l’état du composant et de l’action de l’utilisateur. Les valeurs cursortype suivantes sont prises en charge :

Valeur
Description
des par défaut
Affiché lorsque l’image ne peut pas faire l’objet d’un zoom en raison d’une résolution d’image réduite, des paramètres des composants ou des deux.
zoomin
Affiché lorsque l’image peut faire l’objet d’un zoom avant.
reset
Affiché lorsque l’image est au niveau de zoom maximal et peut être réinitialisé à l’état initial.
glisser
Affiché lorsque l’utilisateur effectue un panoramique sur l’image qui fait l’objet d’un zoom.
le de diapositives
Affiché lorsque l’utilisateur permute une image en effectuant un balayage horizontal ou un clic.

Le séparateur de page qui sépare visuellement les pages gauche et droite de la page du catalogue est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7pageview .s7pagedivider

Propriété CSS
Description
largeur
Largeur du séparateur de page. Réglez-le sur 0 px pour masquer complètement le séparateur.
le image d’arrière-plan
Image à utiliser comme séparateur de page.

Exemple - Pour disposer d’un séparateur de page de 40 pixels de large avec une image semi-transparente.

.s7ecatalogsearchviewer .s7pageview .s7pagedivider {
 width:40px;
 background-image:url(images/sdk/divider.png);
}
NOTE
Lorsque le modificateur frametransition est défini sur turn ou auto (sur les systèmes de bureau), l’aspect du séparateur de page est contrôlé par le modificateur pageturnstyle et la classe CSS .s7pagedivider est ignorée.

Il est possible de configurer l’affichage des curseurs de souris personnalisés sur la zone de visionneuse principale. Cette fonctionnalité est contrôlée avec les sélecteurs d’attributs supplémentaires appliqués à .s7ecatalogsearchviewer .s7pageview classe CSS :

Propriété CSS
Description
des par défaut
Normalement, une flèche s’affiche pour une image non zoomable.
zoomin
Indique à quel moment il est possible d’effectuer un zoom avant sur une image.
reset
Indique à quel moment une image atteint le zoom maximal et peut être réinitialisée.
glisser
Indique quand l’utilisateur effectue une opération de glisser-déposer sur une image agrandie
le de diapositives
Indique quand l’utilisateur permute des images à l’aide du mouvement de diapositive

Exemple : utilisez différents curseurs de souris pour chaque type d’état du composant.

.s7ecatalogsearchviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}
recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref