21 jui 2008
Zoom sur les images avec FancyZoom
Petite nouveauté sur le blog : pendant mes longues et infructueuses recherches pour trouver un script jQuery léger, j’ai découvert et installé FancyZoom pour gérer les zooms sur les images.
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 dusrcen fonction du nom de votre dossier de scripts. - Ajoutez l’attribut
onload="setupZoom();"à la balise<body>. 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.