# Zoomable

> Découvrez le composant Zoomable de PandaSuite, qui permet de rendre tout contenu zoomable pour une interaction enrichie. Explorez ses propriétés et cas d'utilisation, tels que cartes touristiques et catalogues produits interactifs.

https://docs.pandasuite.com/fr/essentials/components/zoomable/

**Le composant Zoomable permet de rendre n'importe quel contenu zoomable. Il offre une interaction enrichie en permettant aux utilisateurs de se concentrer sur des détails spécifiques et d'interagir avec différents niveaux de zoom.**

Voici plusieurs cas d'utilisation du composant Zoomable :

- **Une carte touristique d'une ville**: les utilisateurs peuvent zoomer sur différents quartiers pour découvrir des points d'intérêt, comme des musées, des restaurants ou des parcs. Lorsqu'un utilisateur zoome sur un point d'intérêt, une fenêtre contextuelle apparaît, offrant des informations, des photos, et même des liens pour plus de détails.
- **Catalogue de produits interactif**: les clients peuvent zoomer sur les produits pour voir les détails, les textures et les caractéristiques de chaque article. En zoomant sur un produit spécifique, des options supplémentaires s'affichent, telles que la sélection de la couleur, la taille ou l'ajout au panier.
- **Un jeu "Cherche et trouve"**: les utilisateurs doivent zoomer dans l'image pour retrouver des objets ou personnages bien cachés à l'intérieur. Lorsque l'objet apparaît, celui-ci se débloque automatiquement sur la liste des objets à retrouver.

[Vidéo : Jeu Cherche et trouve réalisé avec le composant Zoomable : on zoome dans une illustration pour retrouver les personnages cachés](https://www.youtube.com/embed/j4FP4NS5NFk?&hl=fr&cc_lang_pref=fr&cc_load_policy=1)

> **Info**
>
> Quelle est la différence avec l'image HD ? Contrairement au composant Image
> HD, le composant Zoomable offre de nombreuses possibilités d'interactions avec
> le contenu zoomable grâce aux marqueurs de position et de visibilité. Le
> composant Image HD permet de mieux afficher et de zoomer dans une image en
> haute

## Propriétés du composant zoomable

Sélectionnez le composant Zoomable pour accéder à ses propriétés :

- **Zoom minimum / maximum**: définissez les limites de zoom pour contrôler jusqu'où les utilisateurs peuvent zoomer ou dézoomer.
- **Point de focalisation du zoom**: cette propriété est utile lorsque les utilisateurs n'interagissent pas avec le contenu zoomable. C'est un point qui va de 0, 0 (point en haut à gauche) à 1,1 (en bas à droite). Il est relatif au contenu affiché à ce moment-là.
- **Zoom utilisateur**: choisissez si les utilisateurs peuvent zoomer librement dans le contenu.
- **Défilement utilisateur**: choisissez si les utilisateurs peuvent se déplacer librement dans le contenu.
- **Exclusion d'objets**: excluez certains objets du zoom afin qu'ils conservent une taille et position constantes.

[Image : Propriétés du composant Zoomable : zoom maximum 6, minimum 1, point de focalisation 0,5 / 0,5, zoom et défilement utilisateur activés]

## Édition et création de marqueurs

Pour éditer le contenu zoomable, double-cliquez sur la zone du composant. Sur la gauche, vous pouvez personnaliser les contrôles pour faciliter la navigation, en faisant apparaître le **Slider** ou la **Minimap**.

Utilisez des marqueurs pour identifier des positions et des zones de zoom spécifiques. Vous avez le choix entre **créer un marqueur de zoom** ou **un marqueur de visibilité**.

Pour ajouter un marqueur, cliquez sur le bouton **+** dans le menu dédié. Par défaut, un marqueur de zoom se crée. Si vous voulez créer un marqueur de visibilité, cliquez sur la flèche déroulante. Les marqueurs se créent automatiquement en fonction de là où vous vous situez. Vous pouvez modifier ces propriétés sur le panneau de droite.

Les propriétés des marqueurs de zoom sont :

- le niveau de zoom
- l'option de centrage automatique

Les propriétés des marqueurs de visibilité sont :

- la cible
- le niveau de visibilité (en pourcentage)
- le type : **Entrant** ou **Sortant**

[Image : Zoomable en mode édition : le marqueur Character 5 est sélectionné, avec ses propriétés à droite : zoom 4,6 et centrage automatique activé]

## Déclencher une action en fonction d'une position de zoom

Vous pouvez configurer des actions qui se déclenchent à des niveaux de zoom spécifiques. Par exemple, affichez des informations supplémentaires ou lancez une animation lorsque l'utilisateur atteint un certain niveau de zoom.

Ici dans l'exemple ci-dessous, l'objectif est de débloquer l'objet dans la liste des objets à retrouver.

[Image : Actions du Zoomable : à chaque marqueur de zoom Character, le menu passe au premier plan et le personnage passe à l'état Found]

[Modèle : Jeu Cherche et Trouve (Look and Find)](https://pandasuite.com/dashboard/use-template/qBjQSIwB5IBMJWwgdpE4)