Type

Component

Plateforme

Framer

Créé en

2026

Type

Component

Plateforme

Framer

Créé en

2026

Explorez chaque détail de vos photos grâce à une visionneuse immersive qui permet de zoomer et de naviguer librement dans une image haute résolution.

Deep Zoom transforme n'importe quelle photo en lightbox interactive avec zoom avancé, déplacement par glisser-déposer et navigation fluide, à la manière d'une visionneuse photo native. Idéal pour les photographes, portfolios ou projets nécessitant d'afficher des images en haute définition.

Features

Image

  • Image légère pour le canvas et version haute résolution chargée uniquement à l'ouverture

  • Possibilité d'utiliser des URLs pour les deux versions

Lightbox

  • Format adapté automatiquement à l'image ou dimensions personnalisées

  • Fond, bordure et radius configurables

  • Animation d'ouverture et de fermeture avec effet spring

Zoom

  • Zoom sous le curseur et déplacement par glisser-déposer

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

  • Boutons +/−, raccourcis clavier et indicateur de zoom

  • Niveau de zoom, intensité, incrément et fluidité personnalisables

Navigation

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

  • Fermeture via Échap, bouton de fermeture ou clic extérieur

  • Le zoom reste désactivé jusqu'au chargement complet de l'image haute résolution

Overlay

  • Couleur et blur personnalisables

  • Option pour un overlay totalement transparent tout en conservant la fermeture au clic extérieur

Accessibilité

  • Navigation complète au clavier

  • Gestion du focus à l'intérieur de la lightbox

  • Retour automatique du focus sur le déclencheur à la fermeture

Note d'usage

Deep Zoom est particulièrement adapté aux photographes souhaitant présenter leurs images avec un niveau de détail proche de la qualité originale. L'image haute résolution n'est chargée qu'à l'ouverture de la lightbox, mais reste un fichier complet : privilégiez donc des images optimisées pour limiter leur poids et leur impact sur les temps de chargement.

Installation

  1. Glissez Deep Zoom sur votre canvas Framer

  2. Importez une image et sa version haute résolution

  3. Personnalisez le zoom et l'apparence de la lightbox

  4. Publiez