Deep Zoom Inline permet aux visiteurs de zoomer et de se déplacer dans une image tout en la conservant à son emplacement d'origine. Le zoom fonctionne avec Ctrl/Cmd + scroll pour ne pas interférer avec le défilement normal de la page, ainsi qu'avec le glisser-déposer et les contrôles intégrés.

Features

Image

• Importez une image ou utilisez une URL

• Couleur d'arrière-plan personnalisable lorsque le ratio de l'image diffère de celui du cadre

• Bouton de téléchargement optionnel avec nom de fichier personnalisable

Zoom

• Ctrl/Cmd + scroll pour zoomer sous le curseur sans bloquer le scroll de la page

• Pinch-to-zoom et déplacement à un doigt sur mobile

• Boutons +/− et indicateur de zoom en temps réel

• Niveau de zoom, intensité du scroll et fluidité personnalisables

Navigation

• Mini-carte déplaçable pour visualiser la position dans l'image

• Touche Échap pour revenir instantanément à 100 %

• Indication visuelle lorsque le visiteur tente de zoomer sans utiliser Ctrl/Cmd

Accessibilité

• Contrôles au clavier pour le zoom et la réinitialisation

• Gestion claire du focus

Note d'usage

Deep Zoom Inline utilise directement l'image fournie pour le zoom, sans version basse résolution séparée. Privilégiez donc une image suffisamment grande et correctement optimisée : un fichier trop petit ou trop compressé perdra en netteté lors du zoom, tout en augmentant le poids de la page.

Si vous recherchez une expérience en plein écran avec lightbox, Deep Zoom propose une version dédiée à cet usage.

Installation

1. Glissez Deep Zoom Inline sur votre canvas Framer

2. Importez une image ou utilisez une URL

3. Définissez les dimensions du cadre et ajustez les paramètres du zoom

4. Publiez