Zoom sur les images avec FancyZoom

Ce script, développé par Cabel Sasser (co-fondateur de Panic et développeur de Transmit), transforme tout lien vers une image afin de charger l’image cible dans la page.

En bref, le zoom, plutôt que d’ouvrir l’image dans une nouvelle fenêtre, s’affiche dans la page au-dessus des autres éléments et disparaît en un clic dans la page.

Installation du script

Une fois l’archive téléchargée et décompressée, vous obtenez deux dossiers : « images-global » et « js-global ».

Téléchargez ces dossiers sur votre site et renommez-les si vous le souhaitez. Plaçons par exemple les images dans « assets/img » et les scripts dans « assets/js ».

Ouvrez la page (ou le modèle de page) où sera utilisé le script et insérez dans l’entête (entre les balises <head> et </head>) les deux lignes suivantes :

<script src="/assets/js/FancyZoom.js" type="text/javascript"></script>

et

<script src="/assets/js/FancyZoomHTML.js" type="text/javascript"></script>.

Attention à bien modifier le début du « src » en fonction du nom de votre dossier de scripts.

Ajoutez l’attribut onload="setupZoom();" à la balise . Par exemple :

<body [...] onload="setupZoom();">

Et voilà, c’est terminé ! Tous les liens de la page qui pointent vers des images bénéficieront du script.

Exemples d’utilisation

Le head-up display (HUD) sur ma BMW Serie 5 :

Config de ma radio Futaba 3PKS en gros plan :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>